Skip to content

Customized SlashMenuItems are not selected correctly when selected with the keyboard #554

Closed
@hyuckkim

Description

@hyuckkim

Describe the bug
My team made two custom blocks and insert to slash menu.

slashMenuItems: [
      ...getDefaultReactSlashMenuItems(),
      insertCheckBoxBlock,
      insertChartBlock,
    ],

insertCheckBoxBlock's group is "Work", and insertChartBlock's group is "Media".
like that:
image

As long as I selected everything with the mouse, there was no problems, but with keyboard, it insert incorrect thing.

I can work around this temporarily by matching the values in your code to the visible values.
like this:

slashMenuItems: [
      ...getDefaultReactSlashMenuItems(),
      insertChartBlock,
      insertCheckBoxBlock,
    ],

However, I am reporting this because it seems clear that this was not intended.

To Reproduce

  1. Make some SlashMenuItem. Group must be "Headings".
    like that:
export const testBlock: ReactSlashMenuItem<
  BlockSchemaWithBlock<"test", typeof CheckBoxBlockSpec.config>
> = {
  name: "test",
  execute: () => {},
  group: "Headings",
  icon: <div />,
}
  1. Insert the Item to slashMenutems.
    like that:
    slashMenuItems: [
      ...getDefaultReactSlashMenuItems(),
      testBlock,
    ],
  1. Move to browser editor and add some 'basic blocks' by slash menu with 'keyboard'.
    pp

Misc

  • Node version: v21.5.0
  • Package manager: npm 10.2.4
  • Browser: edge 121.0.2277.83, but I seems it is not important.
  • I'm a sponsor and would appreciate if you could look into this sooner than later 💖

Metadata

Metadata

Assignees

No one assigned

    Labels

    bugSomething isn't workingprio:highHigh priority

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions