input+datalist elements within megamenu

Hi Michael,

It sounds like the browser is failing to keep the focus within the menu when you hover over the datalist content. You might find it works OK in some browsers. The only workaround I can think of would be to set the menu event to “Click” instead of hover.

Regards,
Tom

I appreciate your response, and I’ve now tried that. It didn’t help. Is there a class or ID that needs to remain on focus, or active for it to stay on? Is there a class I can add to the menu while I remain on the datalist, then remove when I leave? Is there a javascript function I can call to open the menu again, or an event I can block then re-add?

I also added this element to the WordPress menu, because I wanted this functionality on mobile. The mobile menu works. I’m wondering if its a CSS display property problem with the Astra theme. I’ve tried playing with this, setting some to blocks, but I cant get the menu to stay open.

I’m a capable developer, I will share all my results so you can fix this for all your users.

• This reply was modified 11 months ago by Michael.
• This reply was modified 11 months ago by Michael.

Hi Micheal,

The sub menu opens when the parent element gets focus (mouseenter). It’ll stay open until it loses focus (mouseleave).

Ensuring the parent menu item has a class of ‘mega-toggle-on’ would also keep it open, so maybe you could work out something with that. We also have a JS API you might be able to utilise: https://www.megamenu.com/documentation/javascript-api/

Regards,
Tom