Search input autofocus on Iphone

Can anyone help with writing the code correctly?

add_action( 'wp_head', 'fibosearch_wp_head' );
function fibosearch_wp_head() { ?>

    <script>
        window.addEventListener('load', function() {
            if ( typeof jQuery !== 'undefined' ) {
                var button = jQuery('.dgwt-wcas-search-wrapp, .dgwt-wcas-search-icon, .dgwt-wcas-ico-magnifier, .dgwt-wcas-ico-magnifier-handler');
                button.on( 'click', function() {
                    window.setTimeout(function(){
                        jQuery('.dgwt-wcas-search-input, .dgwt-wcas-search-input-2, .dgwt-wcas-search-form').focus();
                    }, 200);
                } );
            }
        }, false);
    </script>
	<?php }

• This reply was modified 9 months, 1 week ago by bullshmaiser.

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

Thanks for the answer, I installed it, but the code doesn’t work ;(

autofocus dont work and the search page has become unusable, since the search result pops up with any touch. video

• This reply was modified 9 months ago by bullshmaiser.
• This reply was modified 9 months ago by bullshmaiser.
• This reply was modified 9 months ago by bullshmaiser.

People don’t use this solution – it doesn’t work

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

does not work. I left the code on the site so you can test it too

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

Tell me, have you fixed it?

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 4 months ago by Kris.

thanks for the help, but this doesn’t work either