-
Notifications
You must be signed in to change notification settings - Fork 47.5k
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
React 16 continues to incorrectly handle disabled <options> as #2803 #11100
Comments
I am encountering this now. Here is a component you can use to test: import React from 'react'
const TestSelect = ({ placeholder, options }) => (
<select
style={{ height: '50px', width: '100px', marginTop: '100px' }}
name={name}>
<option
value={0}
disabled>
{placeholder}
</option>
{options.map((opt, i) =>
<option
key={i}
value={opt}
style={{ color: '#000' }}>
{opt}
</option>
)}
</select>
)
export default () => {
return (
<div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', flex: 1, height: '500px' }}>
<h2>YOLO</h2>
<div>
<TestSelect
placeholder="Select an option"
options={['one', 'two', 'buckle de la shoe']}
/>
</div>
</div>
)
} I believe a decent solution is to leave the default option I do this in React Native. I am noticing now, the value is a string This way, you can just maintain the value of unselectable options as With that said, it is currently annoying me because I cannot have the first option in my
This is an easy work-around for me anyway. I will just do in my
|
@amackintosh your example seems to work fine if you use defaultValue: https://jsfiddle.net/Luktwrdm/39/ It's not selected by default because the html spec says that the first non-disabled item should be the "default" item when nothing is marked as selected. see #10456 for more info Gonna close this out. Disabled options can be be selected via the normal React means, either with defaultValue or controlling the value. The original error stems from a miscommunication about what defaultValue is (it's not the index), there is more details in #11099 |
@jquense The problem with this Fiddle is that it actually uses
|
Just come across this. Long time web dev, recent React user. Why isn't this possible without being complained at in the console? |
i submitted a patch that did exactly that |
I would like to report my bug #2803 again please, because it was closed, and @gaearon said "re-open it if it's still a problem."
As I currently understand it, React is incorrectly handling a common case in the construction of
<select>
s. It is fairly normal to create a<select>
where the first element is disabled, but remains pre-selected.React should render this case, but instead renders the first deselected control.
I attempted to fix this by forcing the selection. The normal approach is to set
selected
on the relevant<option>
, but React disallows this, preferring a novel propertydefaultValue
on the<select>
instead, mimicing a first-write version of the<select>
propertyvalue
.If you attempt to set
defaultValue
, what you set is ignored (it may be the case that defaultValue is broken on select.)React's inability to render a disabled
<option>
as either the default or selected initial has been present since at least sometime mid-version-14, which is when I first found it. I first documented it in 15.3.1 in January 2015, because prior to then it was faster to tell the core devs on IRC. I do not know how far it goes back past mid-r14.The text was updated successfully, but these errors were encountered: