why doesn't hitting enter when a SELECT is focused submit the form?

Question

Consider the following HTML:

<form action="">
    <input />
    <select>
        <option>A</option>
        <option>B</option>
    </select>
    <input type="submit" />
</form>

If the focus is on the input (text box) and I hit enter, the form submits.

But, if the focus is on the select (dropdown box) and I hit enter, nothing happens.

I know I could figure out some JavaScript to override this, but I want to know why hitting enter doesn't just work?

Is there something I would break by capturing the enter with JavaScript (maybe some native keyboard accessibility of the dropdown)?

Answer 1

It's simply the nature of the control. The Enter key (or a mouse click) is what makes the selection. To submit the form when pressing Enter would result in a poor user experience, since the form would essentially be unusable.

I would not recommend changing the behavior via JavaScript, simply because the default behavior is the norm and what everyone will expect.

(Imagine what it would be like if every form submitted when you made a selection in a drop-down list. Consider searching on Amazon.com, for example. One selects a category then enters the search term. If one selected a category by pressing Enter, the form would submit before the search term could be entered.)