Search input autofocus on Iphone

Hi @bullshmaiser

Please try this code snippet:

// FiboSearch mobile autofocus search input fix on iOS
add_action( 'wp_footer', function() { ?>
	<script type="text/javascript">
		jQuery(document).ready(function($) {
			var searchIcon = $('.js-dgwt-wcas-layout-icon-flexible');
			var searchInput = $('.elementor-element-bf5b3a6 .dgwt-wcas-search-input');

			setTimeout(function() {
				if (searchIcon.length && searchInput.length) {
					$('body').on('click', searchIcon, function() {
						setTimeout(function() {
							searchInput.focus();
						}, 100);
					});

					// iOS Safari
					$('body').on('touchstart', searchIcon, function() {
							setTimeout(function() {
									searchInput.focus();
							}, 100);
					});	
				}
			}, 150);
		});
	</script>
<?php }, 9999 );

You have two ways to add this code to your theme:

1. Open the functions.php in your child theme and add the code at the end.
2. or install the Code Snippets plugin and apply this code as a snippet.

Regards,
Kris

Hi, @bullshmaiser!

Let’s try this improved code where we:

• Removing unnecessary delay: We reduce the delay of calling the function to 0 ms.
• Changing the event registration method. Instead of using on('click', ...) and on('touchstart', ...), we will use the click() and touchstart() methods directly on the elements.

add_action( 'wp_footer', function() { ?>
	<script type="text/javascript">
		jQuery(document).ready(function($) {
			var searchIcon  = $('.js-dgwt-wcas-layout-icon-flexible');
			var searchInput = $('.elementor-widget-container .dgwt-wcas-search-input');

			if (searchIcon.length && searchInput.length) {
				searchIcon.click(function() {
					setTimeout(function() {
						searchInput.focus();
					}, 0);
				});

				// For iOS Safari, trigger autofocus when search icon is touched
				searchIcon[0].addEventListener('touchstart', function() {
					setTimeout(function() {
						searchInput.focus();
					}, 0);
				});
			}
		});
	</script>
<?php }, 9999 );

Regards,
Kris

Hi @bullshmaiser!

In the upcoming version of the FiboSearch, we will try to fix this issue. However, it’s important to note that this attempt comes with no explicit guarantee of success.

Regards,
Kris

Hi @bullshmaiser!

No, we still working on it, but can you test my two new solutions?

1st:

add_action( 'wp_footer', function() { ?>
	<script type="text/javascript">
		jQuery(document).ready(function($) {
			var searchIcon  = $('.js-dgwt-wcas-search-icon-handler');
			var searchInput = $('#dgwt-wcas-search-input-2');

			if (searchIcon.length && searchInput.length) {
				searchInput.attr('tabindex', '-1');

				searchIcon.click(function() {
					requestAnimationFrame(function() {
						searchInput.focus();
					});
				});

				searchIcon[0].addEventListener('touchstart', function() {
					requestAnimationFrame(function() {
						searchInput.focus();
					});
				});
			}
		});
	</script>
<?php }, 9999 );

2nd:

add_action( 'wp_footer', function() { ?>
	<script type="text/javascript">
		jQuery(document).ready(function($) {
			var searchIcon  = $('.js-dgwt-wcas-search-icon-handler');
			var searchInput = $('#dgwt-wcas-search-input-2');

			if (searchIcon.length && searchInput.length) {
				searchInput.attr('tabindex', '-1');

				function focusInput() {
					searchInput.focus();
				}

				searchIcon.on('click touchstart', function() {
					$('.elementor-element-bf5b3a6').addClass('visible');
					focusInput();
				});
			}
		});
	</script>
<?php }, 9999 );

Please let me know if any of these solutions will work.

Regards,
Kris

• This reply was modified 2 years ago by Kris.