Comments (2)
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.
from chakra-react-select.
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.
from chakra-react-select.
Related Issues (20)
- [BUG] Warning: Prop `id` did not match. Server: HOT 2
- [BUG]: `colorScheme` doesn't get passed to input variants HOT 4
- [BUG] `selectedOptionStyle` and `variant` are missing from `Select` types. HOT 16
- selectedOptionStyle with isMulti HOT 1
- [BUG] Breaking Change in chakraui/icon HOT 6
- Property "size" does not exist on type HOT 1
- [BUG] "default" is not exported by "node_modules/@chakra-ui/icon/dist/index.mjs", imported by "node_modules/chakra-react-select/dist/esm/chakra-components/menu.js". HOT 1
- [BUG] useBasicStyles type error on Vite HOT 1
- [BUG] Group Heading props does not work HOT 3
- [Feature request] Allow adding some related keywords to dropdown items so that they can be searched based on those keywords HOT 1
- [BUG] Problem with accessibility of the CreatableSelect (nested interactive elements) HOT 2
- [BUG] peerDependencies to Chakra v2 still show up HOT 5
- [BUG] Cannot start the application when using chakra-react-select with Vite HOT 2
- [BUG] Custom components automatically switch to Chakra style instead of keeping default HOT 1
- [BUG]: No `ValueType` export for the `onChange` handler HOT 11
- property data-testid is not render
- [BUG] Version 4.7.6 breaks colors for selected item HOT 2
- [BUG] LoadOptions doesn't render options when isMulti = True and there is already one selected option in component HOT 1
- [BUG] Incompatible with Chakra UI Pro theme HOT 3
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from chakra-react-select.