[BUG] name and required does not work with standard form validation

[Vasanth]

Description

When the component is added within a form, it should run field validations when the form is submitted.

Attributes like required and name should be propagated from the component props to the input that is supposed to hold the selected value.

These attributes are respected by the underlying library react-select. However, they are not functional on chakra-react-select.

chakra-react-select Version

4.6

Link to Reproduction

https://codesandbox.io/s/prod-browser-17s6f4

TypeScript?

• Yes I use TypeScript

Steps to reproduce

1. Open the sanbox
2. Click on submit
3. Default validation is not run

Operating System

• macOS
• Windows
• Linux
• iOS/iPadOS
• Android

Additional Information

No response

[Chris Sandvik]

So the original required prop does function on Chakra React Select, but you're right, the isRequired prop should handle that if it's passed. I thought it was doing so, I'll look into it.

And for the name prop, I'm not sure what you are looking to happen with it when passed to the original select. Looking at the HTML for the original's input, I'm not seeing a name attribute at all:

<input class="" autocapitalize="none" autocomplete="off" autocorrect="off" id="react-select-3-input" spellcheck="false" tabindex="0" type="text" aria-autocomplete="list" aria-expanded="false" aria-haspopup="true" aria-required="true" role="combobox" aria-describedby="react-select-3-placeholder" value="" style="color: inherit; background: 0px center; opacity: 1; width: 100%; grid-area: 1 / 2 / auto / auto; font: inherit; min-width: 2px; border: 0px; margin: 0px; outline: 0px; padding: 0px;">

I'd need more info on what you're trying to accomplish with this before I can do anything to fix it.

[Chris Sandvik]

Hey, so sorry about the delay on this one! I honestly forgot that I hadn't merged a fix for this, as I've been really busy at work. A fix has just been published in v4.7.4 though.

I also wanted to go back on something I said in my original commend though, there are actually two <input> elements that are rendered by the core React Select. One is the actual input you type in (is the isSearchable prop isn't set to false). The other is a hidden input that receives the actual required attribute that is actually used for the native form validation. That means this second hidden input is also the one that receives the name attribute. This was something I hadn't really thought about much in the past, as I usually stick to non-native form validation that's built into a form library, like react-hook-form.

The purpose of adding this second input is that the actual input you type in to should never actually have a value inside of it when a form as submitted, because as soon as you select a value or remove focus from it, the value is cleared. Therefor, a second input has to be there to ensure the native form validation works.

---

Interestingly, the way this is managed internally by React Select, is that they just removed the required attribute if a value is actually selected in the form. And when isMulti is passed, a hidden input is actually created for each of the selected options. For example:

<div>
  <input name="chakra-select" type="hidden" value="one">
  <input name="chakra-select" type="hidden" value="two">
</div>

Anyway, just thought this was interesting, as this part isn't modifiable by any of the custom components you can pass in. React Select always renders these inputs to the DOM. I'm not actually sure why they remove the required prop once an option is selected, as these should be valid once they have a value anyway, but I guess it doesn't really matter at that point. I'm sure they have their reasons.