diff --git a/netbox/project-static/dist/netbox.js b/netbox/project-static/dist/netbox.js index 7e8feeb18..c880e23e9 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 63f586436..adc770528 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/config.ts b/netbox/project-static/src/select/config.ts index 74c2fb63d..c655b5271 100644 --- a/netbox/project-static/src/select/config.ts +++ b/netbox/project-static/src/select/config.ts @@ -1,9 +1,24 @@ -export const config = { - plugins: { - // Provides the "clear" button on the widget - clear_button: { - html: (data: Dict) => - ``, - }, - }, -}; +interface PluginConfig { + [plugin: string]: object; +} + +export function getPlugins(element: HTMLSelectElement): object { + const plugins: PluginConfig = {}; + + // Enable "clear all" button + plugins.clear_button = { + html: (data: Dict) => + ``, + }; + + // Enable individual "remove" buttons for items on multi-select fields + if (element.hasAttribute('multiple')) { + plugins.remove_button = { + title: 'Remove', + }; + } + + return { + plugins: plugins, + }; +} diff --git a/netbox/project-static/src/select/dynamic.ts b/netbox/project-static/src/select/dynamic.ts index 10ce955c2..c1ac468e9 100644 --- a/netbox/project-static/src/select/dynamic.ts +++ b/netbox/project-static/src/select/dynamic.ts @@ -1,7 +1,7 @@ import { TomOption } from 'tom-select/src/types'; import { escape_html } from 'tom-select/src/utils'; import { DynamicTomSelect } from './classes/dynamicTomSelect'; -import { config } from './config'; +import { getPlugins } from './config'; import { getElements } from '../util'; const VALUE_FIELD = 'id'; @@ -44,7 +44,7 @@ function renderItem(data: TomOption, escape: typeof escape_html) { export function initDynamicSelects(): void { for (const select of getElements('select.api-select:not(.tomselected)')) { new DynamicTomSelect(select, { - ...config, + ...getPlugins(select), valueField: VALUE_FIELD, labelField: LABEL_FIELD, maxOptions: MAX_OPTIONS, diff --git a/netbox/project-static/src/select/static.ts b/netbox/project-static/src/select/static.ts index f97a281cc..ab80e4fc5 100644 --- a/netbox/project-static/src/select/static.ts +++ b/netbox/project-static/src/select/static.ts @@ -1,7 +1,7 @@ import { TomOption } from 'tom-select/src/types'; import TomSelect from 'tom-select'; import { escape_html } from 'tom-select/src/utils'; -import { config } from './config'; +import { getPlugins } from './config'; import { getElements } from '../util'; // Initialize