Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fix submenu and menu group focus #669

Closed
wants to merge 2 commits into from

Conversation

yhy-1
Copy link

@yhy-1 yhy-1 commented Nov 9, 2023

Fix focus for when the first menu is a group/sub-menu. The issue is with shouldFocusKey calculation, it should skip grouping since it is not focusable.
Related ticket: ant-design/ant-design#45367

Comment on lines +381 to +401
useImperativeHandle(ref, () => {
return {
list: containerRef.current,
focus: options => {
const shouldFocusKey =
mergedActiveKey ??
childList.find(
node =>
!node.props.disabled &&
(node.props.children.length || node.props.children.type),
)?.key;
if (shouldFocusKey) {
containerRef.current
?.querySelector<HTMLElement>(
`[data-menu-id='${getMenuId(uuid, shouldFocusKey as string)}']`,
)
?.focus?.(options);
}
},
};
});
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
useImperativeHandle(ref, () => {
return {
list: containerRef.current,
focus: options => {
const shouldFocusKey =
mergedActiveKey ??
childList.find(
node =>
!node.props.disabled &&
(node.props.children.length || node.props.children.type),
)?.key;
if (shouldFocusKey) {
containerRef.current
?.querySelector<HTMLElement>(
`[data-menu-id='${getMenuId(uuid, shouldFocusKey as string)}']`,
)
?.focus?.(options);
}
},
};
});
useImperativeHandle(ref, () => ({
list: containerRef.current,
focus: options => {
const shouldFocusKey =
mergedActiveKey ??
childList.find(
node =>
!node.props.disabled &&
(node.props.children.length || node.props.children.type),
)?.key;
if (shouldFocusKey) {
containerRef.current
?.querySelector<HTMLElement>(
`[data-menu-id='${getMenuId(uuid, shouldFocusKey as string)}']`,
)
?.focus?.(options);
}
},
}));

Copy link

codecov bot commented Nov 9, 2023

Codecov Report

Merging #669 (21cb290) into master (36f47b5) will increase coverage by 0.00%.
The diff coverage is 100.00%.

❗ Current head 21cb290 differs from pull request most recent head b59525a. Consider uploading reports for the commit b59525a to get more accurate results

@@           Coverage Diff           @@
##           master     #669   +/-   ##
=======================================
  Coverage   99.57%   99.58%           
=======================================
  Files          27       27           
  Lines         713      717    +4     
  Branches      192      196    +4     
=======================================
+ Hits          710      714    +4     
  Misses          3        3           
Files Coverage Δ
src/Menu.tsx 98.69% <100.00%> (+0.03%) ⬆️

📣 Codecov offers a browser extension for seamless coverage viewing on GitHub. Try it in Chrome or Firefox today!

childList.find(
node =>
!node.props.disabled &&
(node.props.children.length || node.props.children.type),
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
(node.props.children.length || node.props.children.type),
(node.props.children.length || node.props.children.type === 'group'),

Copy link
Contributor

@Ke1sy Ke1sy Nov 13, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@afc163 Thank you for suggestion, but after some testing we found out with @yhy-1 that current solution doesn't work properly as the focus moves to the group (which is not focusable), instead of the first focusable child of this group. Currenty I am working on improvements to fix it. Will push my changes soon.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants