react-component / react-component/menu

Enter keydown on items in SubMenu

Open
#92 6 comments 3 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

bug help wanted
Dominant language
TypeScript
Stars
701
Forks
266
Avg merge
4d 11h
Merged PRs (30d)
3

Description

Hi!

I'm wrapping some RC features like rc-menu inside my own componentes.
This is how I'm using them right now:

const menu = (
      <FFMenu onClick={(item) => { console.log(item.key); }}>
        <FFMenu.Item key="1" icon="person">Testando 1</FFMenu.Item>
        <FFMenu.Item key="2" icon="build">Testando 2</FFMenu.Item>
        <FFMenu.SubMenu key="3" icon="check" title="Testando 3">
          <FFMenu.Item key="3-1">Testando 3-1</FFMenu.Item>
          <FFMenu.Item key="3-2">Testando 3-2</FFMenu.Item>
          <FFMenu.Item key="3-3">Testando 3-3</FFMenu.Item>
          <FFMenu.Item key="3-4">Testando 3-4</FFMenu.Item>
        </FFMenu.SubMenu>
        <FFMenu.Item key="4" icon="credit_card">Testando 4</FFMenu.Item>
      </FFMenu>
);

So, as you can see in the component FFMenu i pass the "onClick" function.
When i select the first item "Testando 1" and use arrows it'll navigate normally, when i press "Enter" the console.log(); shows up.
The problem is that when I'm using the arrows in any Item inside a SubMenu when i press enter, it'll close the SubMenu, and will not select the Item that was "hovered/active".

Checked the demos and examples and seems to be the same thing.
When we press enter in any item, the standard behavior should not be to "click" the item?

Sorry about my english and thanks for the attention.

Contributor guide

No contributing guide indexed for this repository

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Reproduce the issue using the nested SubMenu example and keyboard navigation with arrow keys followed by Enter. Trace the SubMenu keyboard interaction and its item selection behavior; done means pressing Enter on an active nested item invokes the menu onClick callback instead of only closing the SubMenu.

Written by the indexing model from the issue text.

Assessment

Tech stack
react, typescript
Domain
accessibility, frontend
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Active
Clarity
Mostly clear
Newbie friendliness
58/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.