`useSelect` default usage does not work inside a `<form>` tag.

[wadetandy]

• downshift version: 6.1.3
• node version: codesandbox
• npm (or yarn) version: codesandbox

Relevant code or config

<form>
  <div>
    <label {...getLabelProps()}>Choose an element:</label>
    <button
      {...getToggleButtonProps()}
    >
      {selectedItem || 'Elements'}
    </button>
  </div>
</form>

What you did:

The default usage of useSelect does not work inside a <form> tag.

What happened:

Without adding a preventDefault() onClick handler, the form will submit when the toggle button is clicked.

Reproduction repository: https://codesandbox.io/s/vigilant-thunder-3vh91?file=/src/index.js:448-622

Problem description:

elements inside

tags will submit the form by default. Suggested solution:

Not sure whether this is working as designed or not, but if so, perhaps it could be called out somewhere as a "gotcha" in the docs?

[IAluI]

By default, type attribute of <button> tag is submit. It is web standart. Therefore your form was submitted.

Specify type=button for <button> tag instead of call preventDefault() in event handler.

[tonypee]

It seems correct that hitting Enter will submit the form, whereas you can press 'down' or 'space' to open the select. Otherwise, how would you submit it?

Or, possibly, the submit should only occur if you have previously opened/closed the menu since focussing it? Not sure what the standard for a dropdown select would be tho. It seems that react select doesnt open/closed when you hit enter

[IAluI]

@tonypee, if you open examples you can see what downshift select does open/closed when you hit enter. Like a native <select>.

I dont know how submit <form> with keyboard if native <select> is focused. Do you know how to do it?