diff --git a/web/src/components/ui/dropdown/Dropdown.stories.tsx b/web/src/components/ui/dropdown/Dropdown.stories.tsx index 1424b0261..b6b2e14d1 100644 --- a/web/src/components/ui/dropdown/Dropdown.stories.tsx +++ b/web/src/components/ui/dropdown/Dropdown.stories.tsx @@ -541,7 +541,6 @@ export const WithFooterContent: Story = { // Example with numbered items export const WithNumberedItems: Story = { args: { - menuHeader: 'Numbered Menu Items', items: [ { value: '1', diff --git a/web/src/components/ui/dropdown/Dropdown.tsx b/web/src/components/ui/dropdown/Dropdown.tsx index 40f87bdc1..5394affa1 100644 --- a/web/src/components/ui/dropdown/Dropdown.tsx +++ b/web/src/components/ui/dropdown/Dropdown.tsx @@ -126,6 +126,9 @@ export const Dropdown: React.FC = React.memo( }; }, [selectType, filteredItems]); + // Keep track of selectable item index + let hotkeyIndex = -1; + const dropdownItems = selectType === 'multiple' ? unselectedItems : filteredItems; return ( @@ -155,29 +158,41 @@ export const Dropdown: React.FC = React.memo(
{hasShownItem ? ( <> - {selectedItems.map((item, index) => ( - - ))} + {selectedItems.map((item) => { + // Only increment index for selectable items + if ((item as DropdownItem).value && !(item as DropdownItem).items) { + hotkeyIndex++; + } + return ( + + ); + })} {selectedItems.length > 0 && } - {dropdownItems.map((item, index) => ( - - ))} + {dropdownItems.map((item) => { + // Only increment index for selectable items + if ((item as DropdownItem).value && !(item as DropdownItem).items) { + hotkeyIndex++; + } + return ( + + ); + })} ) : ( @@ -253,6 +268,26 @@ const DropdownItem: React.FC< if (onSelect) onSelect(value); }); + // Add hotkey support when showIndex is true + useHotkeys( + showIndex ? `${index}` : '', + (e) => { + e.preventDefault(); + if (!disabled) { + onClickItem(e as unknown as React.MouseEvent); + // Close the dropdown if closeOnSelect is true + if (closeOnSelect) { + const dropdownTrigger = document.querySelector('[data-state="open"][role="menu"]'); + if (dropdownTrigger) { + const closeEvent = new KeyboardEvent('keydown', { key: 'Escape', bubbles: true }); + dropdownTrigger.dispatchEvent(closeEvent); + } + } + } + }, + { enabled: showIndex && !disabled } + ); + const isSubItem = items && items.length > 0; const isSelectable = !!selectType && selectType !== 'none';