diff --git a/netbox/project-static/dist/netbox.js b/netbox/project-static/dist/netbox.js index 60f8977d3..d8a0e0009 100644 Binary files a/netbox/project-static/dist/netbox.js and b/netbox/project-static/dist/netbox.js differ diff --git a/netbox/project-static/dist/netbox.js.map b/netbox/project-static/dist/netbox.js.map index d6ff2317c..702a0af12 100644 Binary files a/netbox/project-static/dist/netbox.js.map and b/netbox/project-static/dist/netbox.js.map differ diff --git a/netbox/project-static/src/select/classes/dynamicTomSelect.ts b/netbox/project-static/src/select/classes/dynamicTomSelect.ts index f616adbe8..13b483dfe 100644 --- a/netbox/project-static/src/select/classes/dynamicTomSelect.ts +++ b/netbox/project-static/src/select/classes/dynamicTomSelect.ts @@ -121,7 +121,7 @@ export class DynamicTomSelect extends TomSelect { // Add standard parameters query['brief'] = [true]; - query['limit'] = [100]; + query['limit'] = [this.settings.maxOptions]; return queryString.stringifyUrl({ url, query }); } diff --git a/netbox/project-static/src/select/dynamic.ts b/netbox/project-static/src/select/dynamic.ts index f7a272f71..360077c11 100644 --- a/netbox/project-static/src/select/dynamic.ts +++ b/netbox/project-static/src/select/dynamic.ts @@ -3,14 +3,17 @@ import { DynamicTomSelect } from './classes/dynamicTomSelect' const VALUE_FIELD = 'id'; const LABEL_FIELD = 'display'; +const MAX_OPTIONS = 100; // Render the HTML for a dropdown option function renderOption(data: any, escape: Function) { - // If the object has a `_depth` property, indent its display text + + // If the option has a `_depth` property, indent its label if (typeof data._depth === 'number' && data._depth > 0) { return `
${'─'.repeat(data._depth)} ${escape(data[LABEL_FIELD])}
`; } + return `
${escape(data[LABEL_FIELD])}
`; } @@ -20,19 +23,30 @@ export function initDynamicSelects(): void { for (const select of getElements('select.api-select')) { new DynamicTomSelect(select, { - plugins: ['clear_button'], valueField: VALUE_FIELD, labelField: LABEL_FIELD, + maxOptions: MAX_OPTIONS, + + // Provides the "clear" button on the widget + plugins: ['clear_button'], + + // Disable local search (search is performed on the backend) searchField: [], + + // Reference the disabled-indicator attr on the ', + + // Load options from API immediately on focus preload: 'focus', - maxOptions: 100, + + // Define custom rendering functions render: { option: renderOption - } + }, + + // By default, load() will be called only if query.length > 0 + shouldLoad: function(): boolean { return true; } }); }