Skip to content

Review: Select Typeahead example #10208

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
adamviktora wants to merge 4 commits into from
Closed

Review: Select Typeahead example #10208

Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
671cfb1
fix(SelectTypeahead example): make "no results" option aria-disabled
adamviktora Mar 20, 2024
f0f02d6
fix(SelectTypeahead example): don't close the menu on input click whe…
adamviktora Mar 20, 2024
22bbebf
fix(SelectTypeahead example): remove visual focus on item after closi…
adamviktora Mar 20, 2024
400e9b6
fix(SelectTypeahead example): remove check icon from the selected opt…
adamviktora Mar 27, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
19 changes: 17 additions & 2 deletions packages/react-core/src/components/Select/examples/SelectTypeahead.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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' }
];
}

Expand All @@ -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);
};
Expand All @@ -80,6 +88,10 @@ export const SelectBasic: React.FunctionComponent = () => {
const onTextInputChange = (_event: React.FormEvent<HTMLInputElement>, value: string) => {
setInputValue(value);
setFilterValue(value);

if (value !== selected) {
setSelected('');
}
};

const handleMenuArrowKeys = (key: string) => {
Expand Down Expand Up @@ -132,6 +144,7 @@ export const SelectBasic: React.FunctionComponent = () => {
case 'Tab':
case 'Escape':
setIsOpen(false);
setFocusedItemIndex(null);
setActiveItem(null);
break;
case 'ArrowUp':
Expand All @@ -147,7 +160,7 @@ export const SelectBasic: React.FunctionComponent = () => {
<TextInputGroup isPlain>
<TextInputGroupMain
value={inputValue}
onClick={onToggleClick}
onClick={onInputClick}
onChange={onTextInputChange}
onKeyDown={onInputKeyDown}
id="typeahead-select-input"
Expand Down Expand Up @@ -188,6 +201,8 @@ export const SelectBasic: React.FunctionComponent = () => {
onSelect={onSelect}
onOpenChange={() => {
setIsOpen(false);
setFocusedItemIndex(null);
setActiveItem(null);
}}
toggle={toggle}
>
Expand Down