Select: Don't show remove button on multi select if disabled (#67303)

packages/grafana-ui/src/components/Select/SelectBase.test.tsx

@@ -9,7 +9,7 @@ import { selectOptionInTest } from '../../../../../public/test/helpers/selectOpt
 import { SelectBase } from './SelectBase';
 
 describe('SelectBase', () => {
-  const onChangeHandler = () => jest.fn();
+  const onChangeHandler = jest.fn();
   const options: Array<SelectableValue<number>> = [
     {
       label: 'Option 1',
@@ -218,4 +218,47 @@ describe('SelectBase', () => {
       expect(menuOptions).toHaveLength(2);
     });
   });
+
+  describe('Multi select', () => {
+    it('calls on change to remove an item when the user presses the remove button', async () => {
+      const value = [
+        {
+          label: 'Option 1',
+          value: 1,
+        },
+      ];
+      render(
+        <SelectBase onChange={onChangeHandler} options={options} isMulti={true} value={value} aria-label="My select" />
+      );
+
+      expect(screen.getByLabelText('My select')).toBeInTheDocument();
+
+      await userEvent.click(screen.getByLabelText('Remove Option 1'));
+      expect(onChangeHandler).toHaveBeenCalledWith([], {
+        action: 'remove-value',
+        name: undefined,
+        removedValue: { label: 'Option 1', value: 1 },
+      });
+    });
+    it('does not allow deleting selected values when disabled', async () => {
+      const value = [
+        {
+          label: 'Option 1',
+          value: 1,
+        },
+      ];
+      render(
+        <SelectBase
+          onChange={onChangeHandler}
+          options={options}
+          disabled
+          isMulti={true}
+          value={value}
+          aria-label="My select"
+        />
+      );
+
+      expect(screen.queryByLabelText('Remove Option 1')).not.toBeInTheDocument();
+    });
+  });
 });

packages/grafana-ui/src/components/Select/SelectBase.tsx

@@ -357,7 +357,7 @@ export function SelectBase<T>({
           },
           SelectContainer,
           MultiValueContainer: MultiValueContainer,
-          MultiValueRemove: MultiValueRemove,
+          MultiValueRemove: !disabled ? MultiValueRemove : () => null,
           ...components,
         }}
         styles={selectStyles}