fix: listbox updates

Author: segunadebayo

.changeset/listbox-flushsync-fix.md

@@ -0,0 +1,7 @@
+---
+"@zag-js/listbox": patch
+---
+
+- Fix issue in React where filtering items with an input would throw a
+  `flushSync was called from inside a lifecycle method` warning.
+- Fix issue where `data-highlighted` wasn't applied to the first item when using `autoHighlight` with input filtering.

packages/machines/listbox/src/listbox.connect.ts

@@ -30,6 +30,7 @@ export function connect<T extends PropTypes, V extends CollectionItem = Collecti
 
   const focused = context.get("focused")
   const focusVisible = refs.get("focusVisible") && focused
+  const inputState = refs.get("inputState")
 
   const value = context.get("value")
   const selectedItems = context.get("selectedItems")
@@ -53,7 +54,7 @@ export function connect<T extends PropTypes, V extends CollectionItem = Collecti
       focused: highlighted && focused,
       focusVisible: highlighted && focusVisible,
       // deprecated
-      highlighted: highlighted && focusVisible,
+      highlighted: highlighted && (inputState.focused ? focused : focusVisible),
       selected: context.get("value").includes(value),
     }
   }
@@ -122,21 +123,17 @@ export function connect<T extends PropTypes, V extends CollectionItem = Collecti
         enterKeyHint: "go",
         onFocus() {
           queueMicrotask(() => {
-            send({ type: "INPUT.FOCUS" })
+            send({ type: "INPUT.FOCUS", autoHighlight: !!props?.autoHighlight })
           })
         },
         onBlur() {
           send({ type: "CONTENT.BLUR", src: "input" })
         },
         onInput(event) {
-          if (!props.autoHighlight) return
-          const node = event.currentTarget
+          if (!props?.autoHighlight) return
+          if (event.currentTarget.value.trim()) return
           queueMicrotask(() => {
-            if (!node.isConnected) return
-            send({
-              type: "HIGHLIGHTED_VALUE.SET",
-              value: node.value ? prop("collection").firstValue : null,
-            })
+            send({ type: "HIGHLIGHTED_VALUE.SET", value: null })
           })
         },
         onKeyDown(event) {

packages/machines/listbox/src/listbox.machine.ts

@@ -73,6 +73,7 @@ export const machine = createMachine({
     return {
       typeahead: { ...getByTypeahead.defaultOptions },
       focusVisible: false,
+      inputState: { autoHighlight: false, focused: false },
     }
   },
 
@@ -131,7 +132,7 @@ export const machine = createMachine({
       effects: ["scrollToHighlightedItem"],
       on: {
         "INPUT.FOCUS": {
-          actions: ["setFocused"],
+          actions: ["setFocused", "setInputState"],
         },
         "CONTENT.FOCUS": [
           {
@@ -143,7 +144,7 @@ export const machine = createMachine({
           },
         ],
         "CONTENT.BLUR": {
-          actions: ["clearFocused"],
+          actions: ["clearFocused", "clearInputState"],
         },
         "ITEM.CLICK": {
           actions: ["setHighlightedItem", "selectHighlightedItem"],
@@ -326,11 +327,24 @@ export const machine = createMachine({
         context.set("highlightedItem", highlightedItem)
       },
 
-      syncHighlightedValue({ context, prop }) {
+      syncHighlightedValue({ context, prop, refs }) {
         const collection = prop("collection")
         const highlightedValue = context.get("highlightedValue")
+        const { autoHighlight } = refs.get("inputState")
+
+        // when autoHighlight is enabled, always highlight first item on collection change
+        if (autoHighlight) {
+          queueMicrotask(() => {
+            context.set("highlightedValue", prop("collection").firstValue ?? null)
+          })
+          return
+        }
+
+        // if highlighted value is no longer in collection, clear it
         if (highlightedValue != null && !collection.has(highlightedValue)) {
-          context.set("highlightedValue", null)
+          queueMicrotask(() => {
+            context.set("highlightedValue", null)
+          })
         }
       },
 
@@ -349,6 +363,14 @@ export const machine = createMachine({
       clearFocused({ context }) {
         context.set("focused", false)
       },
+
+      setInputState({ refs, event }) {
+        refs.set("inputState", { autoHighlight: !!event.autoHighlight, focused: true })
+      },
+
+      clearInputState({ refs }) {
+        refs.set("inputState", { autoHighlight: false, focused: false })
+      },
     },
   },
 })

packages/machines/listbox/src/listbox.types.ts

@@ -151,6 +151,7 @@ export interface ListboxSchema<T extends CollectionItem = CollectionItem> {
   refs: {
     typeahead: TypeaheadState
     focusVisible: boolean
+    inputState: { autoHighlight: boolean; focused: boolean }
   }
   action: string
   guard: string