I’m looking for opinions on this question. This will be a tough one to mark someone as the correct answer since it’s mostly opinion, but if you have lots of UI experience, please share your reasoning.
So I have a dropdown (select tag) using entirely JavaScript in a web application. It used to use ASP.NET postbacks when changing dropdowns and was real quirky/inconsistent with different browsers, and was very slow. When you click the dropdown, and then click an option in the dropdown, the focus stays on that dropdown but the index/option gets changed. GREAT! If you click the dropdown, arrow down to your option, and then hit the [ENTER] key, it takes your value and tries submitting the form as the submit button would do, and errors out if something is incorrect. FANTASTIC!
What should be the behavior when the end user first clicks the dropdown, and then move the mouse pointer on top of the option without clicking it (a different option obviously), then hit the [TAB] key? [ANSWER #1] Should the option get selected and tab to the next field, or [ANSWER #2] should we leave the value that was previously there before clicking the dropdown, and just tab to the next field? It would be nice to give me reasoning.. if you have lots of UI experience. Or if you have lots of web surfing experience and just get annoyed by one or the other–I’m interested in those stories as well.
Please don’t get this confused with clicking the dropdown, then arrowing to the option you want, and hit the [TAB] key. That will select that option (change the index) before tabbing.
You asked for reasoning, so I’ll start there. You want the user to be able to accomplish thier goal, and choosing an option on your drop-down list is only a means to an end, not the actual goal. They’re thinking in higher-level terms about the job they’re trying to accomplish, and you don’t want to distract them with the mechanics of your dropdown. Therefore (a) you don’t want them to have to stop and think about your dropdown, and (b) you want thier initial asumptions about how it works to actually be true, so they don’t manipulate it in such a way that they think they made a choice while the widget thinks they didn’t.
Two principles get you there: consistency, and the Principle of least astonishment. Look at other dropdowns. In particular, look at other controls that resemble your dropdown or offer the same affordances. Look at other controls that offer conceptually similar choices. Look within your page, other pages in the site, other sites the intended users are likely to visit, and desktop applications the intended users are likely to be familiar with. When you find some examples, do what they do.
If you find a bunch of examples, and they aren’t consistent with each other, then you go with whatever would be the least astonishing. Think about the negatives of being inconsistent–it’s surprising, it’s remarkable in the sense of being something users will warn each other about–and do whatever minimizes those things.