[ContextMenu][DropdownMenu] Add submenu support #682
Conversation
Co-authored-by: Jenna Smith <[email protected]>
* Scope typeahead via collection * Exclude only on typeahead space key * Simplify typeahead * Prevent continuous `updateSearch` call * Inline `onExclusiveKeyDown` functionality * Clear search buffer when leaving * Move `MenuSubTrigger` code below `MenuContent` * `isTypingAhead` conditional clarity
…684) Co-authored-by: Jenna Smith <[email protected]>
…enus (#688) * [ContextMenu][DropdownMenu] delay sub trigger open via pointer * Add pointer area grace * Use clientX/Y rather than pageX/Y because getBoundingClientRect doesn't include scroll * Update DropdownMenu.stories.tsx * feedback * onItemEnter * Update Menu.tsx * more explicit open timer ref * Remove content rect caching
|
I'm so pleased with how this feels now, especially after #688 👏 , I did notice one very minor detail and that's when we enter and leave within the 100ms window of the pointer grace, the focus sticks: CleanShot.2021-06-04.at.21.26.14.mp4 |
ah yep good catch. |
I don't think it was introduced in that change, but just exposed by this new state it can be in. Will take a look during a full reg test and cross browser bizzo. |
* Add `aria-labelledby` * Follow `aria-expanded` spec for submenu triggers * Updates based on feedback * Rename root context type
* Focus first item when all content types open for keyboard users * Initial feedback addressed * Add `pointerdown` to keyboard user logic * Remove capture * Re-apply capture events with comment
* Share grace timer ref in content * Align pointer behaviour closer with native * Simplify base story for easier test * Remove export of private func * Tidy from feedback * Minor naming adjustment * Apply `useCallback` Co-authored-by: Andy Hook <[email protected]>
|
Did a final round of browser testing, here is what I've found. You cannot enter a submenu with keyboard if it was originally opened via the pointer CleanShot.2021-06-14.at.09.24.13.mp4If you navigate to a submenu two levels deep and click the root trigger, the open state sticks CleanShot.2021-06-14.at.09.30.12.mp4With touch inputs there is some odd behaviour when layered click targets overlap e.g. after a collision adjustment (seen on IOS but can reproduce in emulated dev tool) CleanShot.2021-06-14.at.09.37.20.mp4 |
…707) * Fix menu focus after pointer interaction * Add explainer
…709) * [ContextMenu][DropdownMenu] Improve touch/mouse handling separation * Feedback
Closes #383
This PR adds submenu support to
ContextMenuandDropdownMenuWhile there are variations in submenu behaviour across desktop and web, we've generally attempted to stick close to the native macos implementation. See original discussion here
Demo
CleanShot.2021-06-04.at.19.03.00.mp4
TODO
Menu([Menu] Add submenu primitives #627)ContextMenuandDropdownMenu([ContextMenu][DropdownMenu] Integrate new submenu parts #629)TriggerItemcomponent to resolve static type issues ([ContextMenu][DropdownMenu] AddTriggerItempart #683)aria-labelledbyto follow spec #692 [DropdownMenu] EnableonEntryFocusfor root menu #694)