@grafana/ui: Add support for showing selected options in `Select` (#66391)

* Add support for showing selected options

* Don't set a default to avoid breaking existing

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

@@ -206,5 +206,16 @@ describe('SelectBase', () => {
         { action: 'select-option', name: undefined, option: undefined }
       );
     });
+
+    it('hideSelectedOptions prop - when false does not hide selected', async () => {
+      render(<SelectBase onChange={jest.fn()} options={options} aria-label="My select" hideSelectedOptions={false} />);
+
+      const selectEl = screen.getByLabelText('My select');
+
+      await selectOptionInTest(selectEl, 'Option 2');
+      await userEvent.click(screen.getByText(/option 2/i));
+      const menuOptions = screen.getAllByLabelText('Select option');
+      expect(menuOptions).toHaveLength(2);
+    });
   });
 });

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

@@ -144,6 +144,7 @@ export function SelectBase<T>({
   width,
   isValidNewOption,
   formatOptionLabel,
+  hideSelectedOptions,
 }: SelectBaseProps<T>) {
   const theme = useTheme2();
   const styles = getSelectStyles(theme);
@@ -222,6 +223,7 @@ export function SelectBase<T>({
     filterOption,
     getOptionLabel,
     getOptionValue,
+    hideSelectedOptions,
     inputValue,
     invalid,
     isClearable,

packages/grafana-ui/src/components/Select/types.ts

@@ -37,6 +37,7 @@ export interface SelectCommonProps<T> {
   formatCreateLabel?: (input: string) => string;
   getOptionLabel?: (item: SelectableValue<T>) => React.ReactNode;
   getOptionValue?: (item: SelectableValue<T>) => string;
+  hideSelectedOptions?: boolean;
   inputValue?: string;
   invalid?: boolean;
   isClearable?: boolean;