-
-
Notifications
You must be signed in to change notification settings - Fork 248
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
Conversation
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); | ||
} | ||
}, | ||
}; | ||
}); |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
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); | |
} | |
}, | |
})); |
Codecov Report
@@ 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
📣 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), |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
(node.props.children.length || node.props.children.type), | |
(node.props.children.length || node.props.children.type === 'group'), |
There was a problem hiding this comment.
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.
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