Avoid blur on html select value change

Viewed 136

In my web app (written in ionic1/angularJS) I have an html select, it works as expected in normal cases, but when I use the app with voice assistant after any changes on the select the focus is automatically moved in another element. I investigated and no focus and blur methods are called. Does anybody have any idea why the app move the focus in different html element? Is there any way to avoid it?

Thanks in advance for your help.

1 Answers

Focus jumping to the top of the page without a request from the script is usually because the focusable element has been lost in some way.

Speech recognition can sometimes be pickier about events than keyboards are. I'd check to make sure you're using an on change event rather than an on input event - change only fires once the user has committed the value, not while they are poking at it, e.g. by navigating the list of options.

The other thing that can make a select input lose focus is if making a selection updates the content on the page and the focus was trying to move to the updating area. For example, if you have a select that updates a second input, then clicking Tab from the select should send focus to the second input. But if the second input isn't present in the DOM yet or is being updated, focus has nowhere to land and reverts to the top of the page. If that's the issue, explicitly asking for the focus to move to the new input after all updates are finished should fix the problem.

PS: Try adding a tag for the voice assistant in case that helps this issue find the right folks.

Related