-
Notifications
You must be signed in to change notification settings - Fork 375
Closed
Labels
Description
Describe the enhancement or change
The new typeahead requires for the user to implement all the keyboard navigation and generally all event handling manually.
const handleMenuArrowKeys = (key: string) => {
let indexToFocus;
if (isOpen) {
if (key === 'ArrowUp') {
// When no index is set or at the first index, focus to the last, otherwise decrement focus index
if (focusedItemIndex === null || focusedItemIndex === 0) {
indexToFocus = selectOptions.length - 1;
} else {
indexToFocus = focusedItemIndex - 1;
}
}
if (key === 'ArrowDown') {
// When no index is set or at the last index, focus to the first, otherwise increment focus index
if (focusedItemIndex === null || focusedItemIndex === selectOptions.length - 1) {
indexToFocus = 0;
} else {
indexToFocus = focusedItemIndex + 1;
}
}
setFocusedItemIndex(indexToFocus);
const focusedItem = selectOptions.filter((option) => !option.isDisabled)[indexToFocus];
setActiveItem(`select-multi-typeahead-${focusedItem.value.replace(' ', '-')}`);
}
};
const onInputKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {
const enabledMenuItems = selectOptions.filter((menuItem) => !menuItem.isDisabled);
const [firstMenuItem] = enabledMenuItems;
const focusedItem = focusedItemIndex ? enabledMenuItems[focusedItemIndex] : firstMenuItem;
switch (event.key) {
// Select the first available option
case 'Enter':
if (!isOpen) {
setIsOpen((prevIsOpen) => !prevIsOpen);
} else if (isOpen && focusedItem.value !== 'no results') {
onSelect(focusedItem.value as string);
}
break;
case 'Tab':
case 'Escape':
setIsOpen(false);
setActiveItem(null);
break;
case 'ArrowUp':
case 'ArrowDown':
event.preventDefault();
handleMenuArrowKeys(event.key);
break;
}
};
This is the example code for the keyboard navigation. This code should not be exposed to the developers as it's unlikely that it needs to be changed. Settings the focused and active items should be implemented internally and hidden.
Is this request originating from a Red Hat product team? If so, which ones and is there any sort of deadline for this enhancement?
This is just an ehnancement request and definitely not a blocker. However, for this specific component the developer experience has heavily degraded with the upgrade to Patternfly 5.
Metadata
Metadata
Assignees
Labels
Type
Projects
Status
Done