required filed of ListboxInput does not work

[gkuga]

🐛 Bug report

Current Behavior

Setting the required field of ListboxInput to true will not generate a warning when the field is not yet filled in.

Expected behavior

Submitting without empty input needs to show warning message.

Reproducible example

https://codesandbox.io/s/bugreport-6ktgns?file=/src/index.js

Suggested solution(s)

reach-ui/packages/listbox/src/index.tsx

Lines 311 to 314 in cc1ef74

	readOnly
	required={required}
	tabIndex={-1}
	type="hidden"

If required field is set, remove readonly and hidden. And input tags should be hidden by opacity, etc.

Additional context

Your environment

Software	Name(s)	Version
Reach Package		^0.17.0
React		^17.0.2
Browser
Assistive tech
Node
npm/yarn
Operating System	linux

[indiesquidge]

Hey @gkuga thanks for your ticket, and for providing a reproducible example. It's strange that we have required as a prop for this component and expect it to work with native form submission when we use it on an input with readOnly and type="hidden", both of which prevent required from working.

It would be great if we could create an API like this

<form>
  <select required>
    <option hidden value="">Select an option</option>
    <option>Option 1</option>
    <option>Option 2</option>
    <option>Option 3</option>
  </select>
  <button>submit</button>
</form>

Which provides us with what you'd expect

That all said, I'm not sure how we'd accomplish native form submission validation of this kind when we aren't visibly rendering any actual form elements. Your recommendation of removing readOnly and type="hidden" would not solve this because we don't expect the user to fill out the input field, we expect them to select an item from a dropdown—we do not want the input element visible (visually or to screen readers) at any time, and we wouldn't want to confuse them with input required validation messages.

My recommendation for your situation would be to:

• have a default value for your Listbox (that you could check for on your server and return an error response telling the user to select something else)
• make your Listbox a controlled component and validate your form submission with JavaScript on the client
• use a native <select> element as shown above

Unless there is something I'm overlooking, I'm going to recommend to @chaance that we remove the required prop on this component, as it is a no-op on an input with readOnly and type="hidden".