fix(menu): defer focus when content is lazy mounted

chakra-ui · Sep 10, 2024 · 700c75c · 700c75c
1 parent 934aac6
commit 700c75c
Show file tree

Hide file tree

Showing 4 changed files with 32 additions and 17 deletions.
diff --git a/.changeset/sweet-monkeys-visit.md b/.changeset/sweet-monkeys-visit.md
@@ -0,0 +1,5 @@
+---
+"@zag-js/menu": patch
+---
+
+Fix issue where lazy mounting the content causes first menu item to not be focused when opened with keyboard
diff --git a/examples/next-ts/pages/compositions b/examples/next-ts/pages/compositions
diff --git a/examples/next-ts/pages/menu.tsx b/examples/next-ts/pages/menu.tsx
@@ -21,16 +21,18 @@ export default function Page() {
           <button {...api.getTriggerProps()}>
             Actions <span {...api.getIndicatorProps()}>▾</span>
           </button>
-          <Portal>
-            <div {...api.getPositionerProps()}>
-              <ul {...api.getContentProps()}>
-                <li {...api.getItemProps({ value: "edit" })}>Edit</li>
-                <li {...api.getItemProps({ value: "duplicate" })}>Duplicate</li>
-                <li {...api.getItemProps({ value: "delete" })}>Delete</li>
-                <li {...api.getItemProps({ value: "export" })}>Export...</li>
-              </ul>
-            </div>
-          </Portal>
+          {api.open && (
+            <Portal>
+              <div {...api.getPositionerProps()}>
+                <ul {...api.getContentProps()}>
+                  <li {...api.getItemProps({ value: "edit" })}>Edit</li>
+                  <li {...api.getItemProps({ value: "duplicate" })}>Duplicate</li>
+                  <li {...api.getItemProps({ value: "delete" })}>Delete</li>
+                  <li {...api.getItemProps({ value: "export" })}>Export...</li>
+                </ul>
+              </div>
+            </Portal>
+          )}
         </div>
       </main>
       <Toolbar controls={controls.ui}>

diff --git a/packages/machines/menu/src/menu.machine.ts b/packages/machines/menu/src/menu.machine.ts
@@ -630,14 +630,22 @@ export function machine(userContext: UserDefinedContext) {
           })
         },
         highlightFirstItem(ctx) {
-          const first = dom.getFirstEl(ctx)
-          if (!first) return
-          set.highlighted(ctx, first.id)
+          // use raf in event content is lazy mounted
+          const fn = !!dom.getContentEl(ctx) ? queueMicrotask : raf
+          fn(() => {
+            const first = dom.getFirstEl(ctx)
+            if (!first) return
+            set.highlighted(ctx, first.id)
+          })
         },
         highlightLastItem(ctx) {
-          const last = dom.getLastEl(ctx)
-          if (!last) return
-          set.highlighted(ctx, last.id)
+          // use raf in event content is lazy mounted
+          const fn = !!dom.getContentEl(ctx) ? queueMicrotask : raf
+          fn(() => {
+            const last = dom.getLastEl(ctx)
+            if (!last) return
+            set.highlighted(ctx, last.id)
+          })
         },
         highlightNextItem(ctx, evt) {
           const next = dom.getNextEl(ctx, evt.loop)