I wanted to support a full keyboard experience with my new addon and started by getting the keyboard shortcut working. I then wanted popup.html to make the search field selected and active when it it started so the user can just start typing their search.
To do this, I found using “autofocus” on the search input HTML should work. However, only using this case, I am seeing the search input is only selected and active sometimes. I also tried putting a repeating loop to check for the search input is ready and calling input.focus() and input.select().
Even with all this in place, I am not seeing the search input field being consistently selected and active when popup.html is loaded and waiting for input.
Finally, I even added added listeners for focusin/focusout and logged those events thinking maybe something was taking focus from the “autofocus” element.
Here are the logs by just opening/closing and opening/closing the search. The first section “worked” and the input was properly selected and the second did not. The observation I have is that in the cases it works I do see focusin and focusout events being generated, but the failure case did not. HOWEVER, in both cases, I do check if “Search input === document.activeElement” and that evaluates true in both cases.
Not selected
Selected
Logs
As a double check, I took a different addon I had and just added the “autofocus” tag on the “Search Term” and I am seeing the exact same behavior.
Not selected
Selected
Video
