Feature 15832 - Multiselect has no "delete" option on the values (#15883)

* Added remove_button in config.ts

* Fixed linter issues

* Fixed linter issues

* Fixed linter issues

* Enable remove_button plugin only for multi-select fields

* Enable remove_button plugin only for multi-select fields

---------

Co-authored-by: Jeremy Stretch <jstretch@netboxlabs.com>

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) =>
-        `<i class="mdi mdi-close-circle ${data.className}" title="${data.title}"></i>`,
-    },
-  },
-};
+interface PluginConfig {
+  [plugin: string]: object;
+}
+
+export function getPlugins(element: HTMLSelectElement): object {
+  const plugins: PluginConfig = {};
+
+  // Enable "clear all" button
+  plugins.clear_button = {
+    html: (data: Dict) =>
+      `<i class="mdi mdi-close-circle ${data.className}" title="${data.title}"></i>`,
+  };
+
+  // Enable individual "remove" buttons for items on multi-select fields
+  if (element.hasAttribute('multiple')) {
+    plugins.remove_button = {
+      title: 'Remove',
+    };
+  }
+
+  return {
+    plugins: plugins,
+  };
+}

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<HTMLSelectElement>('select.api-select:not(.tomselected)')) {
     new DynamicTomSelect(select, {
-      ...config,
+      ...getPlugins(select),
       valueField: VALUE_FIELD,
       labelField: LABEL_FIELD,
       maxOptions: MAX_OPTIONS,

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 <select> elements with statically-defined options
@@ -10,7 +10,7 @@ export function initStaticSelects(): void {
     'select:not(.tomselected):not(.no-ts):not([size]):not(.api-select):not(.color-select)',
   )) {
     new TomSelect(select, {
-      ...config,
+      ...getPlugins(select),
       maxOptions: undefined,
     });
   }
@@ -26,7 +26,7 @@ export function initColorSelects(): void {
 
   for (const select of getElements<HTMLSelectElement>('select.color-select:not(.tomselected)')) {
     new TomSelect(select, {
-      ...config,
+      ...getPlugins(select),
       maxOptions: undefined,
       render: {
         option: renderColor,