fix: Remove the need of double click on MenuItem on mobile

ariakit · May 12, 2019 · 73b920e · 73b920e
1 parent d3aefd5
commit 73b920e
Show file tree

Hide file tree

Showing 9 changed files with 21 additions and 16 deletions.
diff --git a/packages/reakit/src/Dialog/Dialog.tsx b/packages/reakit/src/Dialog/Dialog.tsx
@@ -181,8 +181,7 @@ export const Dialog = unstable_createComponent({
   useCreateElement: (type, props, children) => {
     warning(
       !props["aria-label"] && !props["aria-labelledby"],
-      `You should provide either \`aria-label\` or \`aria-labelledby\` props.
-See https://reakit.io/docs/dialog`,
+      "You should provide either `aria-label` or `aria-labelledby` props. See https://reakit.io/docs/dialog",
       "Dialog"
     );
     return unstable_useCreateElement(type, props, children);

diff --git a/packages/reakit/src/Menu/Menu.tsx b/packages/reakit/src/Menu/Menu.tsx
@@ -166,8 +166,7 @@ export const Menu = unstable_createComponent({
   useCreateElement: (type, props, children) => {
     warning(
       !props["aria-label"] && !props["aria-labelledby"],
-      `You should provide either \`aria-label\` or \`aria-labelledby\` props.
-See https://reakit.io/docs/menu`,
+      "You should provide either `aria-label` or `aria-labelledby` props. See https://reakit.io/docs/menu",
       "Menu"
     );
     return unstable_useCreateElement(type, props, children);

diff --git a/packages/reakit/src/Menu/MenuItem.tsx b/packages/reakit/src/Menu/MenuItem.tsx
@@ -4,6 +4,7 @@ import { unstable_createComponent } from "../utils/createComponent";
 import { RoverOptions, RoverHTMLProps, useRover } from "../Rover/Rover";
 import { warning } from "../__utils/warning";
 import { unstable_createHook } from "../utils/createHook";
+import { isTouchDevice } from "../__utils/isTouchDevice";
 import { useMenuState, MenuStateReturn } from "./MenuState";
 
 export type MenuItemOptions = RoverOptions &
@@ -38,7 +39,7 @@ export const useMenuItem = unstable_createHook<
     const ref = React.useRef<HTMLElement>(null);
 
     const onMouseOver = React.useCallback(() => {
-      if (options.orientation !== "horizontal") {
+      if (options.orientation !== "horizontal" && !isTouchDevice()) {
         if (!ref.current) {
           warning(
             true,
@@ -67,7 +68,7 @@ export const useMenuItem = unstable_createHook<
           const nestedMenu = menu.querySelector(
             "[role=menu]:not([hidden]),[role=menubar]:not([hidden])"
           );
-          if (!nestedMenu) {
+          if (!nestedMenu && !isTouchDevice()) {
             options.move(null);
             menu.focus();
           }

diff --git a/packages/reakit/src/Menu/StaticMenu.tsx b/packages/reakit/src/Menu/StaticMenu.tsx
@@ -69,8 +69,7 @@ export const StaticMenu = unstable_createComponent({
       !props["aria-label"] &&
         !props["aria-labelledby"] &&
         props.role !== "menubar",
-      `You should provide either \`aria-label\` or \`aria-labelledby\` props.
-See https://reakit.io/docs/menu`,
+      "You should provide either `aria-label` or `aria-labelledby` props. See https://reakit.io/docs/menu",
       "Menu"
     );
 

diff --git a/packages/reakit/src/Popover/Popover.ts b/packages/reakit/src/Popover/Popover.ts
@@ -44,8 +44,7 @@ export const Popover = unstable_createComponent({
   useCreateElement: (type, props, children) => {
     warning(
       !props["aria-label"] && !props["aria-labelledby"],
-      `You should provide either \`aria-label\` or \`aria-labelledby\` props.
-See https://reakit.io/docs/popover`,
+      "You should provide either `aria-label` or `aria-labelledby` props. See https://reakit.io/docs/popover",
       "Popover"
     );
     return unstable_useCreateElement(type, props, children);

diff --git a/packages/reakit/src/Radio/RadioGroup.tsx b/packages/reakit/src/Radio/RadioGroup.tsx
@@ -36,8 +36,7 @@ export const RadioGroup = unstable_createComponent({
   useCreateElement: (type, props, children) => {
     warning(
       !props["aria-label"] && !props["aria-labelledby"],
-      `You should provide either \`aria-label\` or \`aria-labelledby\` props.
-See https://reakit.io/docs/radio`,
+      "You should provide either `aria-label` or `aria-labelledby` props. See https://reakit.io/docs/radio",
       "RadioGroup"
     );
     return unstable_useCreateElement(type, props, children);

diff --git a/packages/reakit/src/Tab/TabList.tsx b/packages/reakit/src/Tab/TabList.tsx
@@ -37,8 +37,7 @@ export const TabList = unstable_createComponent({
   useCreateElement: (type, props, children) => {
     warning(
       !props["aria-label"] && !props["aria-labelledby"],
-      `You should provide either \`aria-label\` or \`aria-labelledby\` props.
-See https://reakit.io/docs/tab`,
+      "You should provide either `aria-label` or `aria-labelledby` props. See https://reakit.io/docs/tab",
       "TabList"
     );
     return unstable_useCreateElement(type, props, children);

diff --git a/packages/reakit/src/Toolbar/Toolbar.tsx b/packages/reakit/src/Toolbar/Toolbar.tsx
@@ -37,8 +37,7 @@ export const Toolbar = unstable_createComponent({
   useCreateElement: (type, props, children) => {
     warning(
       !props["aria-label"] && !props["aria-labelledby"],
-      `You should provide either \`aria-label\` or \`aria-labelledby\` props.
-See https://reakit.io/docs/toolbar`,
+      "You should provide either `aria-label` or `aria-labelledby` props. See https://reakit.io/docs/toolbar",
       "Toolbar"
     );
     return unstable_useCreateElement(type, props, children);

diff --git a/packages/reakit/src/__utils/isTouchDevice.ts b/packages/reakit/src/__utils/isTouchDevice.ts
@@ -0,0 +1,11 @@
+// TODO: Find a better implementation
+
+export function isTouchDevice() {
+  if (process.env.NODE_ENV === "test") return false;
+  return (
+    typeof window !== "undefined" ||
+    "ontouchstart" in window ||
+    navigator.maxTouchPoints > 0 ||
+    navigator.msMaxTouchPoints > 0
+  );
+}