Merge pull request #7285 from netbox-community/7273-apiselect-sorting

Fixes #7273: Disable automatic sorting of select options fetched via API

docs/release-notes/version-3.0.md

@@ -16,6 +16,7 @@
 
 ### Bug Fixes
 
+* [#5775](https://github.com/netbox-community/netbox/issues/5775) - Enable group synchronization for remote authentication backend
 * [#7167](https://github.com/netbox-community/netbox/issues/7167) - Ensure consistent font size when using monospace formatting
 * [#7226](https://github.com/netbox-community/netbox/issues/7226) - Exempt GraphQL API requests from CSRF inspection
 * [#7248](https://github.com/netbox-community/netbox/issues/7248) - Fix global search results section links

netbox/dcim/forms.py

@@ -2238,9 +2238,7 @@ class DeviceForm(BootstrapMixin, TenancyForm, CustomFieldModelForm):
             api_url='/api/dcim/racks/{{rack}}/elevation/',
             attrs={
                 'disabled-indicator': 'device',
-                'data-query-param-face': "[\"$face\"]",
-                # The UI will not sort this element's options.
-                'pre-sorted': ''
+                'data-query-param-face': "[\"$face\"]"
             }
         )
     )

netbox/project-static/src/select/api/apiSelect.ts

@@ -149,13 +149,6 @@ export class APISelect {
    */
   private more: Nullable<string> = null;
 
-  /**
-   * This element's options come from the server pre-sorted and should not be sorted client-side.
-   * Determined by the existence of the `pre-sorted` attribute on the base `<select/>` element, or
-   * by existence of specific fields such as `_depth`.
-   */
-  private preSorted: boolean = false;
-
   /**
    * Array of options values which should be considered disabled or static.
    */
@@ -171,10 +164,6 @@ export class APISelect {
     this.base = base;
     this.name = base.name;
 
-    if (base.getAttribute('pre-sorted') !== null) {
-      this.preSorted = true;
-    }
-
     if (hasUrl(base)) {
       const url = base.getAttribute('data-url') as string;
       this.url = url;
@@ -294,9 +283,7 @@ export class APISelect {
   }
 
   /**
-   * Sort incoming options by label and apply the new options to both the SlimSelect instance and
-   * this manager's state. If the `preSorted` attribute exists on the base `<select/>` element,
-   * the options will *not* be sorted.
+   * Apply new options to both the SlimSelect instance and this manager's state.
    */
   private set options(optionsIn: Option[]) {
     let newOptions = optionsIn;
@@ -304,12 +291,6 @@ export class APISelect {
     if (this.nullOption !== null) {
       newOptions = [this.nullOption, ...newOptions];
     }
-    // Sort options unless this element is pre-sorted.
-    if (!this.preSorted) {
-      newOptions = newOptions.sort((a, b) =>
-        a.text.toLowerCase() > b.text.toLowerCase() ? 1 : -1,
-      );
-    }
     // Deduplicate options each time they're set.
     const deduplicated = uniqueByProperty(newOptions, 'value');
     // Determine if the new options have a placeholder.
@@ -471,9 +452,6 @@ export class APISelect {
 
       if (typeof result._depth === 'number' && result._depth > 0) {
         // If the object has a `_depth` property, indent its display text.
-        if (!this.preSorted) {
-          this.preSorted = true;
-        }
         text = `<span class="depth">${'─'.repeat(result._depth)}&nbsp;</span>${text}`;
       }
       const data = {} as Record<string, string>;