New Select: Fix not being able to click around the caret (#96026)

packages/grafana-ui/src/components/Combobox/Combobox.tsx

@@ -215,8 +215,6 @@ export const Combobox = <T extends string | number>(props: ComboboxProps<T>) =>
     getMenuProps,
     getItemProps,
 
-    openMenu,
-    closeMenu,
     selectItem,
   } = useCombobox({
     menuId,
@@ -327,10 +325,6 @@ export const Combobox = <T extends string | number>(props: ComboboxProps<T>) =>
 
   const { inputRef, floatingRef, floatStyles, scrollRef } = useComboboxFloat(items, rowVirtualizer.range, isOpen);
 
-  const handleSuffixClick = useCallback(() => {
-    isOpen ? closeMenu() : openMenu();
-  }, [isOpen, openMenu, closeMenu]);
-
   const InputComponent = width === 'auto' ? AutoSizeInput : Input;
 
   const suffixIcon = asyncLoading
@@ -346,6 +340,7 @@ export const Combobox = <T extends string | number>(props: ComboboxProps<T>) =>
     <div>
       <InputComponent
         width={width === 'auto' ? undefined : width}
+        className={styles.input}
         suffix={
           <>
             {!!value && value === selectedItem?.value && isClearable && (
@@ -366,11 +361,7 @@ export const Combobox = <T extends string | number>(props: ComboboxProps<T>) =>
               />
             )}
 
-            {/* When you click the input, it should just focus the text box. However, clicks on input suffix arent
-                translated to the input, so it blocks the input from being focused. So we need an additional event
-                handler here to open/close the menu. It should not have button role because we intentionally don't
-                want it in the a11y tree. */}
-            <Icon name={suffixIcon} onClick={handleSuffixClick} />
+            <Icon name={suffixIcon} />
           </>
         }
         {...restProps}

packages/grafana-ui/src/components/Combobox/getComboboxStyles.ts

@@ -99,6 +99,7 @@ export const getComboboxStyles = (theme: GrafanaTheme2) => {
     clear: css({
       label: 'grafana-select-clear',
       cursor: 'pointer',
+      pointerEvents: 'auto',
       '&:hover': {
         color: theme.colors.text.primary,
       },
@@ -107,5 +108,11 @@ export const getComboboxStyles = (theme: GrafanaTheme2) => {
       label: 'grafana-select-warning-icon',
       color: theme.colors.text.secondary,
     }),
+    input: css({
+      label: 'grafana-select-input',
+      '> div > div:last-child': {
+        pointerEvents: 'none',
+      },
+    }),
   };
 };