fix(menu): menu link items not clicking on mobile

chakra-ui · Nov 8, 2023 · 8e2b430 · 8e2b430 · vercel · Nov 8, 2023
1 parent 0515d97
commit 8e2b430
Show file tree

Hide file tree

Showing 3 changed files with 9 additions and 18 deletions.
diff --git a/.changeset/dull-berries-remember.md b/.changeset/dull-berries-remember.md
@@ -0,0 +1,5 @@
+---
+"@zag-js/menu": patch
+---
+
+Fix issue issue where link is not clickable on mobile
diff --git a/packages/machines/combobox/src/combobox.connect.ts b/packages/machines/combobox/src/combobox.connect.ts
@@ -309,11 +309,6 @@ export function connect<T extends PropTypes, V extends CollectionItem>(
           if (itemState.isDisabled || isContextMenuEvent(event)) return
           send({ type: "ITEM.CLICK", src: "pointerup", value })
         },
-        onAuxClick(event) {
-          if (itemState.isDisabled || isContextMenuEvent(event)) return
-          event.preventDefault()
-          send({ type: "ITEM.CLICK", src: "auxclick", value })
-        },
       })
     },
 

diff --git a/packages/machines/menu/src/menu.connect.ts b/packages/machines/menu/src/menu.connect.ts
@@ -88,12 +88,10 @@ export function connect<T extends PropTypes>(state: State, send: Send, normalize
         if (!isLeftClick(evt) || itemState.isDisabled) return
         const target = event.currentTarget
         send({ type: "ITEM_CLICK", src: "pointerup", target, id, closeOnSelect })
-      },
-      onAuxClick(event) {
-        if (itemState.isDisabled) return
-        event.preventDefault()
-        const target = event.currentTarget
-        send({ type: "ITEM_CLICK", src: "auxclick", target, id, closeOnSelect })
+        // Fix issue where links don't get clicked in pointerup on touch devices
+        if (target.matches("a[href]") && event.pointerType === "touch") {
+          target.click()
+        }
       },
     })
   }
@@ -375,13 +373,6 @@ export function connect<T extends PropTypes>(state: State, send: Send, normalize
             send({ type: "ITEM_CLICK", src: "pointerup", target, option, closeOnSelect })
             onCheckedChange?.(!itemState.isChecked)
           },
-          onAuxClick(event) {
-            if (disabled) return
-            event.preventDefault()
-            const target = event.currentTarget
-            send({ type: "ITEM_CLICK", src: "auxclick", target, option, closeOnSelect })
-            onCheckedChange?.(!itemState.isChecked)
-          },
         }),
       )
     },