Slash commands (/) don’t trigger command palette on mobile (keydown not firing)

[MaxVhanamane]

Description
I’m opening a command palette when the user types "/".
This works perfectly on desktop browsers (Windows) , but on mobile browsers ( Android Chrome), the command palette never opens, even though the slash character appears in the editor. what is wrong? is keydown event not firing in android browser?

Here is my code:

 const onKeyDown = (event: React.KeyboardEvent<HTMLDivElement>) => {
   if (
      event.key === "/" &&
      !isInsideCodeBlock(editor) &&
      !showCommandPalette
    ) {
      openCommandPalette();
      return;
    }
}
  <Editable
          renderElement={renderElement}
          decorate={decorate}
          renderLeaf={renderLeaf}
          onDOMBeforeInput={handleRemovePlaceholderText}
          onKeyDown={onKeyDown}
          scrollSelectionIntoView={handleScrollSelectionIntoView}
          className="focus-visible:outline-none flex-1 [&>*]:py-[3px] py-4 [&>*:nth-child(2)]:mt-1 break-words break-all whitespace-pre-wrap"
        />

Recording

slash.commands.mp4

[12joan]

The way Android browsers handle input events can be very different from all other browsers, and can vary massively even among Android phones (dependent on keyboard software and version mostly). I'm not sure if not sending keydown events is typical of Android browsers, but this would be my guess as to why this happens. You could try triggering your menu inside editor.insertText instead.

[MaxVhanamane]

I fixed the issue by moving the logic into the onDOMBeforeInput function.

Also, you should put your command palette logic inside a requestAnimationFrame callback. Otherwise, on Android devices, you might see two slashes (//).

When I wasn’t using requestAnimationFrame, typing "/'" would open the command palette, but I would also see two slashes inserted //, and the cursor would be positioned between them.

const handleOnDOMBeforeInput=(e:InputEvent)=>{
    if (e.data === "/" && !isInsideCodeBlock(editor) && !showCommandPalette) {
      requestAnimationFrame(() => {
        openCommandPalette();
      });
      return;
    }
}

    <Editable
          renderElement={renderElement}
          decorate={decorate}
          renderLeaf={renderLeaf}
          onDOMBeforeInput={handleOnDOMBeforeInput}
          onKeyDown={onKeyDown}
          scrollSelectionIntoView={handleScrollSelectionIntoView}
          className="focus-visible:outline-none flex-1 [&>*]:py-[3px] py-4 [&>*:nth-child(2)]:mt-1 break-words break-all whitespace-pre-wrap"
        />

slash.mp4