So I ended up going with the obvious: I attached a keydown handler to the select that fires the change() event when any key is pressed. I went through several iterations of 'focus me when I show up (if these conditions are met) (after this amount of time)', but all of them provided a miserable screenreader experience in one browser or another. I'll try putting something like that on the sometimes-visible next input and report back. In another StackOverflow thread, someone gives an example of a directive that will set focus to an element as soon as it shows up. Any solution also must account for SHIFT+TAB, which takes you backwards in the DOM through the focusable elements. Regardless, I want to deal with these cases gracefully and in a generalizable way. But in Firefox, the model doesn't update until you tab away from the dropdown, so the new input box shows up too late focus goes to the next one.Īccording to this discussion on the AngularJS GitHub, this might be related to when the browser fires the onchange event, and Firefox may be doing it properly according to spec.

You'll see that in Chrome and IE, this works fine if you tab to the dropdown menu and arrow through the options (don't open the dropdown), the model updates with each new selection. ĭo you need another input box before moving on?

For accessibility purposes, I want the user to be able to tab seamlessly through the inputs as soon as they tab away from the select, I want the new input box focused. The selected value determines whether a text input box shows up afterwards (using ng-show).

Firefox focus update