On android, keyboard comes up momentarily and then disappears when a user clicks the search field (likely due to triggering a js resize event)

Question

Related to this: https://stackoverflow.com/questions/51493956/android-keyboard-appears-and-disappears-when-clicking-search-input

We have some javascript that rearranges a couple elements in the page pretty dramatically depending on if we are on mobile or not (beyond what flex css could handle).

Unfortunately, on android (but not iphone), when our users click on the search field and the mobile keyboard comes up, it triggers a document resize which makes the search field lose focus and makes the keyboard disappear.

Reading the stack overflow link above, I see that one strategy is maybe to, when someone clicks on the search field suspend the resize event listener for half a second, but I'm not sure quite how to do that. The ID for the search field (an <input) is #edit-search-api-fulltext.

Here's my JS so far: (I tried pasting a code snippet on here but it remove all carriage returns making it impossible to read) I'll try again as a comment.

Answer 1

I was able to solve this by momentarily pausing the resize event listener when the search box is clicked on (and the android keyboard is coming up).

var inputBox = document.getElementById("edit-search-api-fulltext");  // monitor search field at top of page for focus for android bugs
if (inputBox) {
  inputBox.addEventListener('focus', function() {
    searchBoxClicked();
  });
}

function searchBoxClicked() { // search bar focused
  window.removeEventListener('resize', WindowResizeCheck);
    
  setTimeout(() => {
    window.addEventListener('resize', WindowResizeCheck);
  }, 500);  // disable resize listener for half a second if user clicks on search box
}

var inputBox2 = document.getElementById("edit-search-api-fulltext--3");  // monitor search field at top of page for focus for android bugs
if (inputBox2) {
  inputBox2.addEventListener('focus', function() {
    searchBoxClicked2();
  });
}

function searchBoxClicked2() { // search bar focused
  window.removeEventListener('resize', WindowResizeCheck);
  setTimeout(() => {
    window.addEventListener('resize', WindowResizeCheck);
  }, 500);  // disable resize listener for half a second if user clicks on search box 
}