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

This commit is contained in:
jeremystretch 2021-09-16 11:08:05 -04:00
parent 574b57eadb
commit 6f24a938d9
4 changed files with 2 additions and 26 deletions

View File

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

Binary file not shown.

Binary file not shown.

View File

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