bug: Enter Key do no select the EditorCommandItem

[zgababa]

Description

I cannot select an EditorCommandItem by pressing Enter, though the Arrow Up and Arrow Down keys work well for navigating through EditorCommandItem.

Describe the bug

When using the slash command menu in EditorCommandItem, the Enter key press event is being captured by the underlying TipTap editor instead of being processed by the CMDK command menu. This prevents users from selecting an option from the slash command menu using the Enter key, though mouse selection works correctly.

To reproduce

Just try to press Enter to select an item, the editor should capture the event and do a line break instead of selecting the CommandItem.

Here's my code:

<EditorRoot key={documentation.id}>
      <EditorContent
        extensions={EXTENSIONS}
        initialContent={documentation.content}
        editorProps={{
          attributes: {
            class: `cursor-text prose prose-md dark:prose-invert prose-headings:font-title font-default focus:outline-none max-w-full`,
          },
        }}
        onUpdate={async ({ editor }) => {
          debounced(editor.getJSON());
        }}
      >
        <EditorBubble className="flex max-w-max bg-white">
          <NodeSelector />
          <TextButtons />
          <LinkSelector />
          <ColorSelector />
        </EditorBubble>
        <EditorCommand className="border-muted bg-background z-50 h-auto max-h-[330px] w-72 overflow-y-auto rounded-md border px-1 py-2 shadow-md transition-all">
          <EditorCommandEmpty className="text-muted-foreground px-2">
            No results
          </EditorCommandEmpty>
          <EditorCommandList>
            {suggestionItems.map(
              (item) =>
                item.command && (
                  <EditorCommandItem
                    onCommand={(val) => {
                      item.command!(val);
                    }}
                    className={`hover:bg-accent aria-selected:bg-accent z-50 flex w-full cursor-pointer items-center space-x-2 rounded-md px-2 py-1 text-left text-sm`}
                    key={item.title}
                  >
                    <div className="border-muted bg-background flex h-10 w-10 items-center justify-center rounded-md border">
                      {item.icon}
                    </div>
                    <div>
                      <p className="font-medium">{item.title}</p>
                      <p className="text-muted-foreground text-xs">
                        {item.description}
                      </p>
                    </div>
                  </EditorCommandItem>
                ),
            )}
          </EditorCommandList>
        </EditorCommand>
      </EditorContent>
    </EditorRoot>

Workaround

I ended up with this solution to capture the Enter key:

useEffect(() => {
  const navigationKeys = ["ArrowUp", "ArrowDown", "Enter"];
  const onKeyDown = (e: KeyboardEvent) => {
    if (navigationKeys.includes(e.key)) {
      e.preventDefault();
      const commandRef = document.querySelector("#slash-command");
      if (commandRef)
        commandRef.dispatchEvent(
          new KeyboardEvent("keydown", {
            key: e.key,
            cancelable: true,
            bubbles: true,
          }),
        );
      return false;
    }
  };
  document.addEventListener("keydown", onKeyDown);
  return () => {
    document.removeEventListener("keydown", onKeyDown);
  };
}, []);

Provide environment information

N/A

[imshafikul]

Did you find the solution?