Unable to get Popup HTML input field to autofocus

VERY frustrating experience!

After at least a good 100 variations, based on many examples, I let my intuition push me (after seeing a hint of a possible race condition) to try a forced-delay on the focus assignment and ... Voilà! SUCCESS !!!

It didn't seem necessary, but for the sake of discipline, I made the change from

<script src="test.js"></script>

to

<script src="test.js" type="text/javascript" ></script>

The "fix" was inserting one of the following code segments at the end of the JavaScript file (depends on your preference as to method, they both work):

setTimeout(
	function open(event){
		var inputBox = document.getElementById("popup_input_text") ;
		inputBox.focus() ;
		inputBox.scrollIntoView() ;
	},
	// this value controls the delay before popup is displayed 
	300
) ;

or

setTimeout(
	function open(event){
		var inputBox = document.querySelector("#popup_input_text") ;
		inputBox.focus() ;
		inputBox.scrollIntoView() ;
	},
	// this value controls the delay before popup is displayed 
	300
) ;

I guess that confirms the existence of that "race" condition as to the element not being created when the auto-focus assignment was being attempted ... but ... it still doesn't explain why the "autofocus" property in the element did NOT have the expected effect!

1 Like