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

required filed of ListboxInput does not work #963

Open
gkuga opened this issue Sep 5, 2022 · 1 comment
Open

required filed of ListboxInput does not work #963

gkuga opened this issue Sep 5, 2022 · 1 comment

Comments

@gkuga
Copy link

gkuga commented Sep 5, 2022

🐛 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.

image

Reproducible example

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

Suggested solution(s)

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
Copy link
Collaborator

indiesquidge commented Sep 7, 2022

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

image

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".

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

No branches or pull requests

2 participants