Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Form submitted when pressing Enter (selecting an item) #42

Closed
rlopzc opened this issue Dec 14, 2019 · 3 comments · Fixed by #43
Closed

Form submitted when pressing Enter (selecting an item) #42

rlopzc opened this issue Dec 14, 2019 · 3 comments · Fixed by #43

Comments

@rlopzc
Copy link
Contributor

rlopzc commented Dec 14, 2019

If the select is wrapped in a Html.form then the form is submitted whenever the user hits enter to select an item (using the keyboard)

@sporto
Copy link
Owner

sporto commented Dec 17, 2019

I'm not convinced that this is wrong. Hitting enter in inputs and submitting a form because of that is the standard browser behaviour. Do you have another inputs in the form? What do you expect to happen when you hit enter there? Maybe the form shouldn't use onSubmit or maybe it should have onPreventDefault in the form. Let's discuss

@rlopzc
Copy link
Contributor Author

rlopzc commented Dec 17, 2019

When I hit enter, I expect the same behavior as the Html select element inside a form, which is just to select the item and not submit the form.
Is the default behavior in other input elements but not in a select as sibling of the inputs.

Using onPreventDefault changes something in the logic of all the interactions in the select behavior?

Small test:

<!DOCTYPE html>

<head>
    <meta charset="utf-8">
</head>

<body>
    <form onsubmit="alert('submitted');">
        <input type="text">
         <select>
          <option value="volvo">Volvo</option>
          <option value="saab">Saab</option>
          <option value="mercedes">Mercedes</option>
          <option value="audi">Audi</option>
        </select>

        <input type="submit" />
    </form>
</body>

Hit enter on the field, it gets submitted. Go to the select and hit enter or change the option and the form will not be submitted.

@sporto
Copy link
Owner

sporto commented Dec 18, 2019

Make sense, thanks

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging a pull request may close this issue.

2 participants