react-component / react-component/menu

Setting active key properly

Open
#146 2 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

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

Description

I'm running the Menu component in conjunction with the rc-tabs components, where each tab/link is a different route.

The issue im having with my menu is that the 'active' menu link doesnt work as it should.

Working well: If i click on the menu link directly, location url is changed, the corresponding tab is loaded and the menu link itself becomes active.

Not working: If I try the same flow, but instead of clicking on the menu link, i click on a tab, location url is changed, corresponding tab is loaded, BUT the menu item corresponding to the new tab is not set to active.

What i dont understand is that if I inspect the code using the devtools React plugin, I see the activeKey and selectedKeys set to the new active page, but this is having no effect on which link should be active.

I do not know how to create a demo of this given that my app is built based on changing url with different tabs.

I can maybe take a video and post it here so that the behaviour im trying to explain is easier to understand ?

Thx.

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

Start by reproducing the Menu and rc-tabs flow described in the issue, comparing direct menu navigation with tab navigation and the resulting activeKey and selectedKeys values. Done means that changing tabs through the URL also visibly activates the corresponding menu item; the issue does not name a file or test to run.

Written by the indexing model from the issue text.

Assessment

Tech stack
react, typescript
Domain
frontend
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Needs clarification
Newbie friendliness
25/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.