How to stop autofocus on the search bar within mobile menu upon open

[IPA_tech]

Hey guys,

This is continuing on from our support ticket. But for recap, on our website when in mobile/responsive mode, the toggleable canvas - megamenu has a search bar in it. And when you open said menu in mobile it autofocuses on the search bar, causing the mobile keyboard to popup.

(Website we spoke about is in the private message attached, but this is continuing from our previous communications)

Now I know that I could just obfuscate it behind a button click to open the menu, but the intention is deliberate for our older audience to give them as much control immediately as possible (specially on mobile).

This was the code that was given to us at the end of our last communication.

However the code didn’t work, or isn’t referencing the right classes to work?

//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.
var searchbox = document.getElementsByClassName("x-anchor");
for (var i = 0 ; i < searchbox.length; i++) {
   searchbox[i].addEventListener('click' , searchActivate , false ) ; 
}

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

Thankyou for any help you can give to get this running. And if in the future the search bar can have a “Autofocus on/off” toggle within cornerstone builder as well I think that would be a nice added little feature for those who need it.

[tristup]

Hi @IPA_tech,

Thanks for reaching out.
The reference code worked for a few other users; can you please check if the selector names are correct or not? If that is correct, you can check by changing the tabindex values through the custom attribute option.

Thanks