[Bug]: TypeError: Cannot read properties of undefined (reading 'selectionRoot') in Menu.handlePointerBasedSelection
Code of conduct
- [X] I agree to follow this project's code of conduct.
Impacted component(s)
Menu
Expected behavior
When using non-menu-item components as submenu clicking those components shouldn't trigger TypeError
Actual behavior
Using arbitrary components as submenu items and clicking them produces the TypeError:
Cannot read properties of undefined (reading 'selectionRoot') in Menu.handlePointerBasedSelection
Screenshots
What browsers are you seeing the problem in?
No response
How can we reproduce this issue?
- Go to '...'
- Click on '....'
- Scroll to '....'
- Check console
- See error
Sample code that illustrates the problem
This might be fixed by adding ? after menuData, see:
target?.menuData?.selectionRoot === this &&
in https://github.com/adobe/spectrum-web-components/blob/d38bf04fc204ea47c1b60874bd48536d961cb9c1/packages/menu/src/Menu.ts#L391
Logs taken while reproducing problem
No response
I'm surprised that without a Menu Item that this code is finding a trigger. Can you share what the trigger is so we can understand how it is both el.getAttribute('role') === this.childRole and el.menuData === undefined?
handlePointerBasedSelection(event) {
const path = event.composedPath();
const target = path.find((el) => {
if (!(el instanceof Element)) {
return false;
}
console.log("MENU SWC: ", el);
return el.getAttribute("role") === this.childRole;
});
prints out:
<li class="spectrum-Menu-item" tabindex="0" role="menuitem"><span class="spectrum-Menu-itemLabel"><span>Edit version info</span></span></li>
and leads to:
TypeError: Cannot read properties of undefined (reading 'selectionRoot')
at Menu.handlePointerBasedSelection (chunk-SCU35XXF.js?v=c2a8ef54:347:59)
at Menu.handlePointerup (chunk-SCU35XXF.js?v=c2a8ef54:321:10)
at Menu.nrWrapper (chunk-DTJESBZO.js?v=c2a8ef54:71:21)
We can add this, but we should make sure we add tests for this case.