Add required prop

[Rall3n]

This PR adds the new required prop to allow for required validation in forms.

This also adds a new prop requiredMessage to customize the content of the HTML5 validation message. I would have wanted to use a default browser message, but there is no API to get them, and the default for <input type='text'> is imo not applicable for a dropdown component.

@ebonow I don't know if and how this should be implemented into our LiveRegion component. Maybe you can find a solution.

[changeset-bot]

🦋 Changeset detected

Latest commit: 7cc7001

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package

Name	Type
react-select	Minor

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[codesandbox-ci]

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

Latest deployment of this branch, based on commit 7cc7001:

Sandbox	Source
react-codesandboxer-example	Configuration

[Rall3n]

Thinking about using <select> instead of an <input type='text'> for the RequiredInput component (would make requiredMessage obsolete as it would use appropriate strings for dropdowns).

[ebonow]

For testing, it might be better to test that the value is explicitly passed as null instead of coalescing in case the behavior differs between undefined and null.

Not that it would here, but it's possible some future use-case changes the default behavior and it gets missed.

[Rall3n]

Removed the requiredMessage prop. Can be achieved using onInvalid on a <form> element.

[nderkim]

Just wondering, does setting value="" mean that it can't be used as an uncontrolled component anymore?

[Rall3n]

It would prevent React from throwing a "Switching from uncontrolled to controlled" error because React reuses the <input> element for RequiredInput component and if a value is set.

I don't know if it was really applicable here anymore, but better safe than sorry.

PS: I added a small comment regarding this in the RequiredInput component.

[srinivasmerugu]

@Rall3n @ebonow With this requiredInput component changes we see an accessibility issue on this new tag .

I think on the below element we may need to pass the type="hidden" similar to other elements in the Select.tsx file since its has tabindex="-1".

<input required="" name="licenseOrCertification" tabindex="-1" class="css-5kkxb2-requiredInput-RequiredInput" value="">

could you please add this in the next minor release as axe dev tools (tool which is used to test the accessibility) is throwing a critical error.

[osvaldokalvaitir]

@Rall3n @ebonow
I tested it and the required property didn't work