root
/
grafana
mirror of https://github.com/grafana/grafana.git
1
0
Fork 0
Code Issues Actions 25 Packages Projects Releases Wiki Activity

Combobox: Combine loading and search/caret icons (#95191) 

Don't have both loading and search/caret icon at the same time
This commit is contained in:
Josh Hunt 2024-10-23 10:39:03 +01:00 committed by GitHub
parent 32d224223e
commit 2a5afd0d1a
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 18 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -156,6 +156,7 @@ export const Combobox = <T extends string | number>({
onChange(selectedItem);
},
defaultHighlightedIndex: selectedItemIndex ?? 0,
scrollIntoView: () => {},
onInputValueChange: ({ inputValue }) => {
const customValueOption =
@ -223,8 +224,19 @@ export const Combobox = <T extends string | number>({
setInputValue(selectedItem?.label ?? value?.toString() ?? '');
}, [selectedItem, setInputValue, value]);
const handleSuffixClick = useCallback(() => {
isOpen ? closeMenu() : openMenu();
}, [isOpen, openMenu, closeMenu]);
const InputComponent = width === 'auto' ? AutoSizeInput : Input;
const suffixIcon = asyncLoading
? 'spinner'
: // If it's loading, show loading icon. Otherwise, icon indicating menu state
isOpen
? 'search'
: 'angle-down';
return (
<div>
<InputComponent
@ -248,19 +260,14 @@ export const Combobox = <T extends string | number>({
}}
/>
)}
<Icon
name={isOpen ? 'search' : 'angle-down'}
onClick={() => {
if (isOpen) {
closeMenu();
} else {
openMenu();
}
}}
/>
{/* 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} />
</>
}
loading={asyncLoading}
{...restProps}
{...getInputProps({
ref: inputRef,