IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2024-12-24 16:10:22 -06:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Joao Silva 2024-11-14 14:24:26 +00:00 committed by GitHub
parent b820fc0111
commit b23fdd63a6
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 9 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
packages/grafana-ui/src/components/Combobox/Combobox.tsx
View File

@ -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}

7
packages/grafana-ui/src/components/Combobox/getComboboxStyles.ts
View File

@ -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',
},
}),
};
};