fix: Pointer down handling on mobile devices (#10649)

app/editor/components/BlockMenu.tsx

@@ -17,8 +17,7 @@ function BlockMenu(props: Props) {
   const renderMenuItem = useCallback(
     (item, _index, options) => (
       <SuggestionsMenuItem
-        onClick={options.onClick}
-        selected={options.selected}
+        {...options}
         icon={item.icon}
         title={item.title}
         shortcut={item.shortcut}

app/editor/components/EmojiMenu.tsx

@@ -47,12 +47,7 @@ const EmojiMenu = (props: Props) => {
 
   const renderMenuItem = useCallback(
     (item, _index, options) => (
-      <EmojiMenuItem
-        onClick={options.onClick}
-        selected={options.selected}
-        title={item.description}
-        emoji={item.emoji}
-      />
+      <EmojiMenuItem {...options} title={item.description} emoji={item.emoji} />
     ),
     []
   );

app/editor/components/LinkEditor.tsx

@@ -207,7 +207,7 @@ const LinkEditor: React.FC<Props> = ({ mark, dictionary, view }) => {
             <>
               {results.map((doc, index) => (
                 <SuggestionsMenuItem
-                  onClick={() => {
+                  onPointerDown={() => {
                     updateLink(doc.url);
                   }}
                   onPointerMove={() => setSelectedIndex(index)}

app/editor/components/MentionMenu.tsx

@@ -285,8 +285,7 @@ function MentionMenu({ search, isActive, ...rest }: Props) {
   const renderMenuItem = useCallback(
     (item, _index, options) => (
       <SuggestionsMenuItem
-        onClick={options.onClick}
-        selected={options.selected}
+        {...options}
         subtitle={item.subtitle}
         title={item.title}
         icon={item.icon}

app/editor/components/PasteMenu.tsx

@@ -29,12 +29,7 @@ export const PasteMenu = observer(({ pastedText, embeds, ...props }: Props) => {
 
   const renderMenuItem = useCallback(
     (item, _index, options) => (
-      <SuggestionsMenuItem
-        onClick={options.onClick}
-        selected={options.selected}
-        title={item.title}
-        icon={item.icon}
-      />
+      <SuggestionsMenuItem {...options} title={item.title} icon={item.icon} />
     ),
     []
   );

app/editor/components/SuggestionsMenu.tsx

@@ -72,6 +72,7 @@ export type Props<T extends MenuItem = MenuItem> = {
     index: number,
     options: {
       selected: boolean;
+      onPointerDown: (event: React.SyntheticEvent) => void;
       onClick: (event: React.SyntheticEvent) => void;
     }
   ) => React.ReactNode;
@@ -641,10 +642,17 @@ function SuggestionsMenu<T extends MenuItem>(props: Props<T>) {
                     }
                   };
 
-                  const handleOnClick = () => {
+                  const handleOnClick = (ev: React.MouseEvent) => {
+                    ev.preventDefault();
+                    ev.stopPropagation();
                     handleClickItem(item);
                   };
 
+                  const stopPropagation = (ev: React.MouseEvent) => {
+                    ev.preventDefault();
+                    ev.stopPropagation();
+                  };
+
                   const currentHeading =
                     "section" in item ? item.section?.({ t }) : undefined;
 
@@ -661,7 +669,8 @@ function SuggestionsMenu<T extends MenuItem>(props: Props<T>) {
                       >
                         {props.renderMenuItem(item as any, index, {
                           selected: index === selectedIndex,
-                          onClick: handleOnClick,
+                          onPointerDown: handleOnClick,
+                          onClick: stopPropagation,
                         })}
                       </ListItem>
                     </React.Fragment>

app/editor/components/SuggestionsMenuItem.tsx

@@ -15,7 +15,7 @@ export type Props = {
   /** Whether the item is disabled */
   disabled?: boolean;
   /** Callback when the item is clicked */
-  onClick: (event: React.SyntheticEvent) => void;
+  onPointerDown: (event: React.SyntheticEvent) => void;
   /** Callback when the item is hovered */
   onPointerMove?: (event: React.SyntheticEvent) => void;
   /** An optional icon for the item */
@@ -31,7 +31,7 @@ export type Props = {
 function SuggestionsMenuItem({
   selected,
   disabled,
-  onClick,
+  onPointerDown,
   onPointerMove,
   title,
   subtitle,
@@ -60,7 +60,7 @@ function SuggestionsMenuItem({
     <MenuButton
       ref={ref}
       disabled={disabled}
-      onClick={onClick}
+      onPointerDown={onPointerDown}
       onPointerMove={disabled ? undefined : onPointerMove}
       $active={selected}
     >