diff --git a/packages/grafana-ui/src/components/Combobox/Combobox.tsx b/packages/grafana-ui/src/components/Combobox/Combobox.tsx index 6bc2d9bd9e7..04b0e076fe1 100644 --- a/packages/grafana-ui/src/components/Combobox/Combobox.tsx +++ b/packages/grafana-ui/src/components/Combobox/Combobox.tsx @@ -215,8 +215,6 @@ export const Combobox = (props: ComboboxProps) => getMenuProps, getItemProps, - openMenu, - closeMenu, selectItem, } = useCombobox({ menuId, @@ -327,10 +325,6 @@ export const Combobox = (props: ComboboxProps) => 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 = (props: ComboboxProps) =>
{!!value && value === selectedItem?.value && isClearable && ( @@ -366,11 +361,7 @@ export const Combobox = (props: ComboboxProps) => /> )} - {/* 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. */} - + } {...restProps} diff --git a/packages/grafana-ui/src/components/Combobox/getComboboxStyles.ts b/packages/grafana-ui/src/components/Combobox/getComboboxStyles.ts index f5f685b2269..9b3ff494f7a 100644 --- a/packages/grafana-ui/src/components/Combobox/getComboboxStyles.ts +++ b/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', + }, + }), }; };