diff --git a/packages/react-core/src/components/Select/examples/SelectTypeahead.tsx b/packages/react-core/src/components/Select/examples/SelectTypeahead.tsx index 8a7ffb04571..dab08492c95 100644 --- a/packages/react-core/src/components/Select/examples/SelectTypeahead.tsx +++ b/packages/react-core/src/components/Select/examples/SelectTypeahead.tsx @@ -44,7 +44,7 @@ export const SelectBasic: React.FunctionComponent = () => { // When no options are found after filtering, display 'No results found' if (!newSelectOptions.length) { newSelectOptions = [ - { isDisabled: false, children: `No results found for "${filterValue}"`, value: 'no results' } + { isAriaDisabled: true, children: `No results found for "${filterValue}"`, value: 'no results' } ]; } @@ -59,6 +59,14 @@ export const SelectBasic: React.FunctionComponent = () => { setFocusedItemIndex(null); }, [filterValue]); + const onInputClick = () => { + if (inputValue) { + setIsOpen(true); + } else { + setIsOpen(!isOpen); + } + }; + const onToggleClick = () => { setIsOpen(!isOpen); }; @@ -80,6 +88,10 @@ export const SelectBasic: React.FunctionComponent = () => { const onTextInputChange = (_event: React.FormEvent, value: string) => { setInputValue(value); setFilterValue(value); + + if (value !== selected) { + setSelected(''); + } }; const handleMenuArrowKeys = (key: string) => { @@ -132,6 +144,7 @@ export const SelectBasic: React.FunctionComponent = () => { case 'Tab': case 'Escape': setIsOpen(false); + setFocusedItemIndex(null); setActiveItem(null); break; case 'ArrowUp': @@ -147,7 +160,7 @@ export const SelectBasic: React.FunctionComponent = () => { { onSelect={onSelect} onOpenChange={() => { setIsOpen(false); + setFocusedItemIndex(null); + setActiveItem(null); }} toggle={toggle} >