Skip to content

Commit dc30c09

Browse files
Only register an option once in strict mode (#3692)
I'm not 100% sure this is the right fix but it _does_ fix keyboard navigation in listbox and menu when using strict mode. Basically the same items/options are being registered more than once and that causes the arrow up/down logic to only advance on every other keypress.
1 parent 51775d2 commit dc30c09

File tree

2 files changed

+19
-4
lines changed

2 files changed

+19
-4
lines changed

packages/@headlessui-react/src/components/listbox/listbox-machine.ts

Lines changed: 9 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -426,10 +426,17 @@ export class ListboxMachine<T> extends Machine<State<T>, Actions<T>> {
426426
},
427427
registerOption: batch(() => {
428428
let options: { id: string; dataRef: ListboxOptionDataRef<T> }[] = []
429+
let seen = new Set<ListboxOptionDataRef<T>>()
430+
429431
return [
430-
(id: string, dataRef: ListboxOptionDataRef<T>) => options.push({ id, dataRef }),
432+
(id: string, dataRef: ListboxOptionDataRef<T>) => {
433+
if (seen.has(dataRef)) return
434+
seen.add(dataRef)
435+
options.push({ id, dataRef })
436+
},
431437
() => {
432-
this.send({ type: ActionTypes.RegisterOptions, options: options.splice(0) })
438+
seen.clear()
439+
return this.send({ type: ActionTypes.RegisterOptions, options: options.splice(0) })
433440
},
434441
]
435442
}),

packages/@headlessui-react/src/components/menu/menu-machine.ts

Lines changed: 10 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -366,10 +366,18 @@ export class MenuMachine extends Machine<State, Actions> {
366366
// Batched version to register multiple items at the same time
367367
registerItem: batch(() => {
368368
let items: { id: string; dataRef: MenuItemDataRef }[] = []
369+
let seen = new Set<MenuItemDataRef>()
369370

370371
return [
371-
(id: string, dataRef: MenuItemDataRef) => items.push({ id, dataRef }),
372-
() => this.send({ type: ActionTypes.RegisterItems, items: items.splice(0) }),
372+
(id: string, dataRef: MenuItemDataRef) => {
373+
if (seen.has(dataRef)) return
374+
seen.add(dataRef)
375+
items.push({ id, dataRef })
376+
},
377+
() => {
378+
seen.clear()
379+
return this.send({ type: ActionTypes.RegisterItems, items: items.splice(0) })
380+
},
373381
]
374382
}),
375383
unregisterItem: batch(() => {

0 commit comments

Comments
 (0)