No Search Function on Mobile Devices

Hi Trent,

Thank you for the details, it helps a lot.

The issue is unfortunately caused by the menu script. It has an event handler attached to the menu “touchstart” event, it is probably to programmatically handle the menu clicks on mobile devices. Unfortunately that event handler prevents further propagation and the “touch” does not get to the input field, as it is cancelled.

When I remove the event handler from the menu it starts working, as you can see here (the input is focused).

The best solution would be to use a different menu element, one that is made for shortcodes or other dynamic content.

If that is not possible, then you can still try a custom code, which I quickly constructed to focus the search whenever the menu is clicked. Try adding this code to the functions.php file in your theme/child theme directory – make sure to have a full server back-up first for safety. For more details you can check the safe coding guidelines.

add_filter('wp_footer', 'asp_my_custom_script', 10);
function asp_my_custom_script() {
  ?>
  <script>
  jQuery(function($) {
    jQuery('.ubermenu-submenu-id-10149').on('click touchstart', function(){jQuery(this).find('input.orig').get(0).focus()});
  });
  </script>
  <?php
}

After adding the code you will have to clear all caches, including the mobile devices.

Unfortuantely I can not guarantee this is going to work in all cases, as the issue is not caused by the search plugin.