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)?

Solution 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.)

Solution 2

The select tag is pretty funny. The only thing the Enter key does is once you click the dropdown open and use the arrow keys to select an option you can hit enter to close the dropdown menu.

What boggles my mind is that the W3 spec. does not state what the enter key should do and every browser does it the same way! The browser programmers could have done one of the following.

Enter when focused on a closed dropdown select would:

1. Open the dropdown so you could key through it while seeing all options.

2. Would submit the form.

Yet everyone decided to not change it... What is even more amazing is that I have been designing websites for 13 years and it wasn't until today that I noticed this when I got a bug fix from the Business Analysts saying they could not submit the form when they hit enter! Reminds me of the Tiny Pony.

http://www.w3.org/TR/html401/interact/forms.html

Comments

[Matt Canty]

You're not quite right - anymore anyway, you probably were on posting. Go to Amazon now and you can select a category and search by hitting enter without interacting with any other form elements.

[sternAndy]

Hitting enter isn't starting the search it's focusing the text input field, where you can type in your search term or just hit enter without entering a word.

[Harry B]

This depends on which browser you are using. For example the enter key will not submit the form in Firefox, but will on Google Chrome.

[userfuser]

I'm not going to -1 this answer, but I dont think it's answering the question nor do I agree with user's suggestion to not change anything about it. For the first - answering "that's how it is" is not the answer :). For the second, there are so many scenarios, users and usages that you can't simply say it will confuse your users.

[Ákos Nikházy]

Funny I would agree with this answer, but I am in a situation when expectation is "no mouse, these girls work with keyboard since the '80s so whole app should work with keyboard"

[Teejay]

Opening SELECT's combo is also performed hitting SPACE. The ENTER not submitting the form is just a stupid behavior that essentially breaks user experience continuity in which ENTER always submit the form (except on SELECTs controls).

[Teejay]

When the SELECT's combo is already open, it's OK to select the highlighted item with ENTER, but another ENTER press should submit.