Comments (16)
cc @hoxyq do lmk if this something valuable to fix!!
I think it is worth fixing, especially given the fact that https://react.dev/reference/react-dom/components/select doesn't list readOnly
as an attribute.
seems an easy fix would be to check if the mounted component is a select component and then conditionally just change the error message, though would need to add tests to support the same.
I am not familiar with the code where this happens, but maybe its worth just implementing its own validation for select
component.
from react.
ok will look up we have holidays here till next week.
seems an easy fix would need to inspect the component and filter the message and add tests to support the same :-)
from react.
@hoxyq can you change the status to confirmed if possible?
from react.
@hoxyq could you spare a few minutes to run the
fixtures/packaging/babels-standalone/dev.html
file ? for some reasonReactDOM.render()
is not defined and onconsole.log(ReactDOM)
it returns an empty Object. am i doing something wrong?if you are able to see
hello world
rendered could you just share the snippet and i can then test my changes.
Can confirm that it doesn't work for me also. Looks like a recent regression, but I don't have the time now to bisect the PR, which introduced this. I've validated that sourcemaps PRs are not related to it, so there is some commit prior to it that breaks this.
from react.
ok @hoxyq i understand appreciate your investigation, any other way i can test my changes if you know, i tried copying the node modules from the
oss/experimental
and putting the code of bothreact
andreact-dom
inside the dummy react project of mine, but it is also not picking any changes.
Jest tests, probably? Or try checking out on some older commit. I've tried main~100
and it works.
from react.
@hoxyq could you spare a few minutes to run the
fixtures/packaging/babels-standalone/dev.html
file ? for some reasonReactDOM.render()
is not defined and onconsole.log(ReactDOM)
it returns an empty Object. am i doing something wrong?if you are able to see
hello world
rendered could you just share the snippet and i can then test my changes.
Should be fixed with #27717.
from react.
Just ran into this and was very confused.
I think it is worth fixing, especially given the fact that https://react.dev/reference/react-dom/components/select doesn't list
readOnly
as an attribute.To back this up, the TypeScript definitions also do not accept
readOnly
on a<select>
, and MDN says it's not allowed (so I guess it's in the spec, though this doesn't make sense to me).Here's the thing about just changing the error message though...
I'm using Zag.js for a single/multi-select component, and I have the following code to render a hidden input, which exists solely to provide a value to
FormData
:<select {...api.hiddenSelectProps} value={multi ? api.value : api.value[0]} > {options.map((option, index) => ( <option key={index} value={option.id}> {option.text} </option> ))} </select>Zag already tracks the state via a statemachine, and the user is able to control the input via other controls that I didn't show. Therefore I really need a
value
and don't need anonChange
. Addingdisabled
makes the error go away, but also omits the field fromFormData
.So as far as I can see, to make the error go away, I have to provide
onChange={() => null}
. This feels a bit strange and dirty, so I think it's worth considering whether the rules you're checking here are truly air-tight. I think they usually are, and this is just a really weird edge case...
IMHO, setting onChange
to no-op is explicit and looks aligned with current react-dom
APIs . If react-dom
's select
had hidden
attribute, we could've also took it into account before printing an error.
from react.
I can work on this and make the error message correctly prompt.
from react.
export default function App() {
const [selectedValue, setSelectedValue] = useState("fruits");
return (
<div className="App">
<select value={selectedValue} onChange={(e) => setSelectedValue(e.target.value)}>
<option value="Mango">Mango</option>
<option value="Apple">Apple</option>
<option value="Pears">Pears</option>
</select>
<input value="hello" readOnly={true} />
</div>
);
}
Does this work in your case?
from react.
export default function App() { const [selectedValue, setSelectedValue] = useState("fruits"); return ( <div className="App"> <select value={selectedValue} onChange={(e) => setSelectedValue(e.target.value)}> <option value="Mango">Mango</option> <option value="Apple">Apple</option> <option value="Pears">Pears</option> </select> <input value="hello" readOnly={true} /> </div> ); }
Does this work in your case?
@felipe-rodolfo the bug is not related to how i should use the Select component, the error message is the Problem since it says to pass a readOnly value to pass a prop as the option for the Select component which does not has the same and does not seem to be a good developer experience.
from react.
cc @hoxyq do lmk if this something valuable to fix!!
from react.
@hoxyq could you spare a few minutes to run the fixtures/packaging/babels-standalone/dev.html
file ? for some reason ReactDOM.render()
is not defined and on console.log(ReactDOM)
it returns an empty Object.
am i doing something wrong?
if you are able to see hello world
rendered could you just share the snippet and i can then test my changes.
from react.
ok @hoxyq i understand appreciate your investigation, any other way i can test my changes if you know, i tried copying the node modules from the oss/experimental
and putting the code of both react
and react-dom
inside the dummy react project of mine, but it is also not picking any changes.
from react.
ok @hoxyq i understand appreciate your investigation, any other way i can test my changes if you know, i tried copying the node modules from the
oss/experimental
and putting the code of bothreact
andreact-dom
inside the dummy react project of mine, but it is also not picking any changes.Jest tests, probably? Or try checking out on some older commit. I've tried
main~100
and it works.
Thanks for the follow up, will try doing the same
from react.
@hoxyq could you spare a few minutes to run the
fixtures/packaging/babels-standalone/dev.html
file ? for some reasonReactDOM.render()
is not defined and onconsole.log(ReactDOM)
it returns an empty Object. am i doing something wrong?
if you are able to seehello world
rendered could you just share the snippet and i can then test my changes.Should be fixed with #27717.
thanks @hoxyq , i have also found the file to change and return the appropriate error, once this is merged, i will take a pull and test the changes locally and add appropriate tests.
from react.
Just ran into this and was very confused.
I think it is worth fixing, especially given the fact that https://react.dev/reference/react-dom/components/select doesn't list
readOnly
as an attribute.
To back this up, the TypeScript definitions also do not accept readOnly
on a <select>
, and MDN says it's not allowed (so I guess it's in the spec, though this doesn't make sense to me).
Here's the thing about just changing the error message though...
I'm using Zag.js for a single/multi-select component, and I have the following code to render a hidden input, which exists solely to provide a value to FormData
:
<select
{...api.hiddenSelectProps}
value={multi ? api.value : api.value[0]}
>
{options.map((option, index) => (
<option key={index} value={option.id}>
{option.text}
</option>
))}
</select>
Zag already tracks the state via a statemachine, and the user is able to control the input via other controls that I didn't show. Therefore I really need a value
and don't need an onChange
. Adding disabled
makes the error go away, but also omits the field from FormData
.
So as far as I can see, to make the error go away, I have to provide onChange={() => null}
. This feels a bit strange and dirty, so I think it's worth considering whether the rules you're checking here are truly air-tight. I think they usually are, and this is just a really weird edge case...
from react.
Related Issues (20)
- React Project Doesn't display on browser HOT 2
- Bug: Undo/Redo not behaving as expected for controlled input when state is updated from an async callback HOT 3
- Bug: React can leak the whole subtree when using contentEditable (reproduction sscce included) HOT 2
- Request: Define to exports cjs/* files in package.json
- Feature request: Define prop preprocessor
- Bug: errors caught by error boundaries appear in console twice HOT 1
- Bug: `flushSync` does not work HOT 2
- Bug: Next.js Build Errors Fix HOT 1
- Bug: Use useId function to generate dom id,it can't use document.querySelector function. HOT 6
- Bug: Despite having implemented optimizations such as shouldComponentUpdate or PureComponent HOT 7
- Bug: unable to compile standalone binary in Deno with server rendering, while using Typescript.
- RSS feed for the blog HOT 3
- Bug: Using useSyncExternalStore with SSR and no getServerSnapshot results in error HOT 6
- Nested <form> elements error with "A React form was unexpectedly submitted." HOT 11
- I am very much looking forward to React having an ESM bundle version similar to Vue, specifically designed for the tree Shaking feature in Rollup, which is convenient to package into NginxScript's njs for SSR use HOT 1
- [DevTools Bug]: Error: Should have a queue. This is likely a bug in React. Please file an issue. HOT 5
- Bug: state update from a rAF in useLayoutEffect not batched when using `createRoot` HOT 7
- New hook: useMemoWithPrev HOT 1
- Bug: Component's redux state value resets to null even though no action to do so initiated HOT 1
- Bug: unstable_runWithPriority continious loop
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 react.