Input Search Field Won’t Focus After Click Magnifying Glass – 2.0

[Ernest Marcinko]

Okay, I suspected it has nothing to do with Elementor either, it wouldn’t make much sense, unless it was a bug of some sort, which at this point can be crossed out.

You can try this variation, but at this point I have no idea if it’s going to change anything at all:

add_action('wp_footer', function () {
	?>
	<script>
		let fakeInput;
		const detectIOS = () => {
			if (
				typeof window.navigator != "undefined" &&
				typeof window.navigator.userAgent != "undefined"
			)
				return window.navigator.userAgent.match(/(iPod|iPhone|iPad)/) != null;
			return false;
		};
		const focusInput = ( targetInput ) => {
			if ( !detectIOS() ) {
				targetInput?.focus();
				return;
			}

			if ( targetInput === undefined || fakeInput === undefined) {
				// create invisible dummy input to receive the focus first
				fakeInput = document.createElement('input')
				fakeInput.setAttribute('type', 'text');
				fakeInput.style.position = 'absolute';
				fakeInput.style.opacity = "0";
				fakeInput.style.height = "0";
				fakeInput.style.fontSize = '16px'; // disable auto zoom
				// you may need to append to another element depending on the browser's auto
				// zoom/scroll behavior
				document.body.prepend(fakeInput);
			}

			if ( targetInput === undefined ) {
				// focus so that subsequent async focus will work
				fakeInput.focus();
			} else {
				targetInput.focus();
			}
		}
		const f = ( ) => {
			let input = document.querySelector('.dialog-widget .asp_m input.orig');
			if ( input === null ) {
				return;
			}
			focusInput(input);
		}
		jQuery(document).on('elementor/popup/show', ()=>{
			setTimeout(()=>{f(true);}, 800);
			document.querySelectorAll(".asp_main_container").forEach((el) => {
				el.addEventListener("asp_search_end", () => {
					focusInput();
					setTimeout(()=>{f();}, 1000);
				});
			});
		});
	</script>
	<?php
}, 999999);

[dandolino32]

Hi Ernest,
I found out the culprit, what’s unfocusing input every time you type. On the elementor popup settings, there was an animation delay. Removed it and now it works great again. Just wanted to let you know in case someone else has a similar issue. Thanks again for your support.

[Ernest Marcinko]

Nice find, thank you very much for sharing! I will keep this in mind.

I suspect it inherently applies to all animations, therefore it triggers every time you type, removing the focus, explains everything.

[dandolino32]

Yes. Thanks again.

[Author]

Posts