react: Bug: Select when passed a value as Prop errors with a suggestion to pass readOnly

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…

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.

@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.

Should be fixed with https://github.com/facebook/react/pull/27717.

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.

Jest tests, probably? Or try checking out on some older commit. I’ve tried main~100 and it works.

@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.

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.

@hoxyq can you change the status to confirmed if possible?

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 😃

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.