fix: focus issues on android

standardnotes · Aug 16, 2023 · 83aafbf · 83aafbf
1 parent d6c4338
commit 83aafbf
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 8 deletions.
diff --git a/packages/web/src/javascripts/Components/StyledTooltip/StyledTooltip.tsx b/packages/web/src/javascripts/Components/StyledTooltip/StyledTooltip.tsx
@@ -1,5 +1,5 @@
 import { classNames } from '@standardnotes/snjs'
-import { ReactNode, useState, useRef, useEffect, MouseEvent } from 'react'
+import { ReactNode, useState, useRef, useEffect } from 'react'
 import { Tooltip, TooltipAnchor, TooltipOptions, useTooltipStore } from '@ariakit/react'
 import { Slot } from '@radix-ui/react-slot'
 import { MutuallyExclusiveMediaQueryBreakpoints, useMediaQuery } from '@/Hooks/useMediaQuery'
@@ -57,6 +57,12 @@ const StyledTooltip = ({
     }
   }, [attachLongPressEvents, cleanupLongPressEvents, isMobile, showOnMobile])
 
+  const clickProps = isMobile
+    ? {}
+    : {
+        onClick: () => setForceOpen(false),
+      }
+
   if (isMobile && !showOnMobile) {
     return <>{children}</>
   }
@@ -65,12 +71,7 @@ const StyledTooltip = ({
     <>
       <TooltipAnchor
         ref={anchorRef}
-        onClick={() => setForceOpen(false)}
-        onContextMenu={(event: MouseEvent) => {
-          if (isMobile && showOnMobile) {
-            event.preventDefault()
-          }
-        }}
+        {...clickProps}
         onBlur={() => setForceOpen(undefined)}
         store={tooltip}
         as={Slot}

diff --git a/...web/src/javascripts/Components/SuperEditor/Plugins/ToolbarPlugins/MobileToolbarPlugin.tsx b/...web/src/javascripts/Components/SuperEditor/Plugins/ToolbarPlugins/MobileToolbarPlugin.tsx
@@ -408,7 +408,14 @@ const MobileToolbarPlugin = () => {
                   <button
                     className="flex items-center justify-center rounded p-0.5 disabled:opacity-50 select-none hover:bg-default"
                     aria-label={item.name}
-                    onClick={item.onSelect}
+                    onMouseDown={(event) => {
+                      event.preventDefault()
+                      item.onSelect()
+                    }}
+                    onContextMenu={(event) => {
+                      editor.focus()
+                      event.preventDefault()
+                    }}
                     disabled={item.disabled}
                   >
                     <div