Skip to content

Commit 2994e7f

Browse files
fix: resolve dropdown keyboard selection issue by improving focus management
- Change main dropdown items from tabIndex={-1} to dynamic tabIndex based on focus state - Update default item and no-items section to tabIndex={0} for proper keyboard event handling - Ensures focused dropdown items can receive Enter/Space keydown events for selection - Fixes issue where keyboard navigation worked but selection didn't Co-authored-by: Anguel <modelorona@users.noreply.github.com>
1 parent f0054c2 commit 2994e7f

File tree

1 file changed

+3
-3
lines changed

1 file changed

+3
-3
lines changed

frontend/src/components/dropdown.tsx

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -221,7 +221,7 @@ export const Dropdown: FC<IDropdownProps> = (props) => {
221221
props.items.map((item, i) => (
222222
<div
223223
role="option"
224-
tabIndex={-1}
224+
tabIndex={focusedIndex === i ? 0 : -1}
225225
key={`dropdown-item-${i}`}
226226
ref={el => {
227227
if (el) itemsRef.current[i] = el;
@@ -261,7 +261,7 @@ export const Dropdown: FC<IDropdownProps> = (props) => {
261261
props.defaultItem != null &&
262262
<div
263263
role="option"
264-
tabIndex={-1}
264+
tabIndex={0}
265265
className={classNames(ITEM_CLASS, {
266266
"hover:scale-105": props.defaultItem.icon == null,
267267
}, props.defaultItemClassName)}
@@ -280,7 +280,7 @@ export const Dropdown: FC<IDropdownProps> = (props) => {
280280
props.items.length === 0 && props.defaultItem == null &&
281281
<div
282282
role="option"
283-
tabIndex={-1}
283+
tabIndex={0}
284284
className="flex items-center gap-1 px-2 dark:text-neutral-300"
285285
onClick={props.onDefaultItemClick}
286286
onKeyDown={(e) => {

0 commit comments

Comments
 (0)