How do I know when a submenu is active

[LisaRyrholm]

Hi,
I have a problem that I can't find an answer to so I hope someone here can help me out.

I am doing a menu with a submenu where I need to run a javascript when the submenu is opening (need to set the height on the submenu based on the height of the topmenu + trigger a gtm interaction event).

The structure looks like this:

<Popover>
 <Menu>
   <MenuItem />
     <SubmenuTrigger>
       <MenuItem> /*This is the menu item that triggers the second level menu that needs to have a height based on the menu above*/
       <Popover>
         <Menu>
           <MenuItem />
           <SubmenuTrigger>
             <MenuItem>
             <Popover>
               <Menu>
                 <MenuItem />
                 /**Repeat more menu items **/
               </Menu>
             </Popover>
           </SubmenuTrigger>
           /**Repeat more menu items or submenu triggers**/
         </Menu>
       </Popover>
     </SubmenuTrigger>
     /**Repeat more menu items or submenu triggers**/
  </Menu>
<Popover>

My problem is that MenuItem has a onHover that works well for triggering the setHeight method. But when I navigate the menu with keyboards this never triggers.

I tried the onAction method but this method never fire for a menu item that opens a sub menu. It only triggers when you are navigating to a href.

Idealy I would like a onPress or onOpening function I can use for triggering the height and gtm interaction event.

How can I achive this?

[snowystinger]

I'll bring up onOpenChange on the SubmenuTrigger, I think that's the most logical spot to put it to match our other triggers.
Can you say more about what this means?

trigger the height

[LisaRyrholm]

Yes onOpenChange would be great to solve my problem.

The menu I have today that I try to change is this:

And when a sub-menu is loaded it is rendering beside like this:

I have manage the behavior of getting the submenu to be positioned beside the other one, but for me the new one is continuing outside (below) the white aria that is the top menu.

And in order to sync the heights so they have the same height I need to set it in JavaScript when the sub-menu is opened to make sure they sync.

I also need when a sub-menu is opened report an interaction to GTM so also do a call to that is necessary, so knowing when an sub menu is open is critical for me. (Since I am not allowed to change the look or behavior that is today when updating to ReactAria lib).

If you want to play around with todays menu (Without react-aria) you can find it here: https://lyko.com/en until I have manage to fix it with react-aria.

[snowystinger]

We think this UI isn't quite a menu. We think that this https://www.w3.org/WAI/ARIA/apg/patterns/disclosure/examples/disclosure-navigation/ would fit your case more closely.
You could also build this as one popover with a vertical tablist.

Would either of those options work for you?

We do think that onOpenChange is still useful for the submenus, so we'll likely still do something like that.

[LisaRyrholm]

In the second level sub menu that opens up to the right I have been using https://react-spectrum.adobe.com/react-aria/Tree.html in order to get the third-level sub menus to be expanded correctly. But that one does not have navigate with space as the normal menu have so the navigation between the first part and the second is inconsistent and that I don't like.

I will have a look on using https://react-spectrum.adobe.com/react-aria/DisclosureGroup.html or https://react-spectrum.adobe.com/react-aria/Tabs.html insead of https://react-spectrum.adobe.com/react-aria/Menu.html

To see if that can trigger the second level correctly. Just need to figure out how to render the DisclosurePanel on the correct position and height.

I will get back to you with my result after trying it out.

[LisaRyrholm]

I have tried it out now and I have problems with both ways. The DisclosureGroup will not expand correctly inside the popover.

And the tabs does always have one thing default open. Is there a way to not open any tab until one is selected? I have tried to set the defaultSelectedKey to null but it does not help.

[snowystinger]

Unfortunately, tabs must always have one selected, as outlined by ARIA.

I don't think you need our disclosure group. Our Disclosure right now is definitely more tied to Accordion type controls. We may expand that use case in the future. But for now, it shouldn't be too hard to implement your own as outlined in the ARIA patterns.
Might be helpful to share a codesandbox or stackblitz outlining your approach for future consideration.

[LisaRyrholm]

I solved my problem with extracting the component inside the popover, give the popover a wrapperRef and then use useEffect inside the new componet to know when it has loaded.

Maybe not the best way to solve it but it makes me go forward with this.

React.useEffect(() => {
const observer = new IntersectionObserver(
([entry]) => {
if (entry.isIntersecting) {
gtmOnMenuInteraction([item.name]);
if (!hasCorrectHeight) {
setHasCorrectHeight(true);
setHeight(triggerRef.current?.clientHeight);
}
observer.disconnect();
}
},
{ threshold: 0.1 },
);

if (wrapperRef.current) {
  observer.observe(wrapperRef.current);
}

return () => {
  observer.disconnect();
};

}, [hasCorrectHeight, item.name, setHasCorrectHeight, setHeight, triggerRef, wrapperRef]);

So basically I used Menu for the top items with a SubmenuTrigger for the sub-menus and inside the submenu I am using Tree in order to get the correct expanding of the third level sub menus.

Probably not the best way to do things but for now this will be the fastest way to get the menu to an accessible state.