Mobile: Search bar in mega menu is active/selected when opened

[Dagaloni]

Hi there!

I just created my first mega menu (many thanks for implementing this!). I created a mega menu for mobile with a navigation and a search bar. However, when the mega menu is opened on an iPhone, the search bar is immediately selected and activated launching the keyboard. Is there a way to prevent the automatisch selecting/activating of the search bar?

The url is: https://sanopharm.com.

Thank you!

[tristup]

Hi Dagaloni,

Its due to the Search element used here, which got the focus immediate after you opened the Mega Menu. As it is the only input field, it got the focus even if you set the tabindex attribute value higher. I would suggest you to remove the search from Mega Menu modal and set beside the Cart menu.

hope it helps.
Thanks

[Dagaloni]

Thanks Tristup!

I really wanted this design so I found my solution using javascript.

Search model → #nofocussearch
Mega menu → #MegaMenuMobile

As long as you use the ID’s for the elements, this code should work.

(Edit 05-06-2021: I updated the script)

//This prevents the keyboard from popping up when you open the Mega Menu Mobile. When the menu is opened this script
// quickly disables the field and then enables is.
document.getElementById("MegaMenuMobile-anchor-toggle").addEventListener("click", searchActivate);

function searchActivate () {
  document.querySelector('#nofocussearch input.x-search-input').setAttribute('disabled','disabled');
	setTimeout(function(){
    document.querySelector('#nofocussearch input.x-search-input').removeAttribute("disabled").select();}, 10)
}

[tristup]

Hi Dagaloni,

Glad that you are able to find the solution, and shared it with others.

Thanks