Bug: React throws warning on browser default function

[welsen]

I'm receiving the following "Warning"

Warning: Use the `defaultValue` or `value` props on <select> instead of setting `selected` on <option>.
    in option (created by styled.option)
    in styled.option (created by Menu)
    in select (created by styled.select)
    in styled.select (created by Menu)
    in div (created by styled.div)
    in styled.div (created by Menu)

React version:

Steps To Reproduce

1. create a select with options

   return (<select>
   <option>a</option>
   <option selected>b</option>
   </select>);

   as usecase: the selected property is defined outside the state of the select component, it is set by navigating the site. As of now it is only a warning, so it works if I use this, but the customer whom I build the application, has strict standards, so as for this warning, it kills the audit of the application, even we stated that it is a React specific warning, not a standard, caused by some coding error.

2. see the warnning whowing up RED in your browser that a simple already built-in function of all browser if overriden and damned eternally.

Code does not have any outside dependencies.

The current behavior

It throws the warning in development.

The expected behavior

It is a standard behavior of all modern browsers, that you can tell the select dropdown or multiselect, that it has one ora other selected by code even from context.

This should not be a warning, as it is a w3c standard feature of the select dropdown. Please remove warnings and what-so-ever that you are forcing developers to do, to avoid using w3c standards.

[welsen]

addendum

w3c sees this feature as standard, so it should not be overridden by any.

[iosh]

i wrote an example, hope help to you

[welsen]

i wrote an example, hope help to you

Thanks, but the example is still not context sensitive :(

[welsen]

Here is a mock sample notice the caret position, and the select box.

1. the caret is in the h1 DOM element
2. the caret is in the first p DOM element

As you navigate the caret the <select> should change to the proper value

In the example you have the edit field which has a state that is our context, and we have the combobox which also has a state. The edit field has the reference object from the select element, so it can set the state of that.

All together we have two objects with different states which can communicate, we also have the context data where our caret is, it should be simple to set the state of the select object, and as it should represent the new state, which it is not doing.

Debug shows that the <select> has the new state, still showing the wrong value, also the <select> element is updated on said change.

To have the correct behavior I had to set the proper <option> elements selected attribute, whereas I'm receiving a big red message:

Warning: Use the `defaultValue` or `value` props on <select> instead of setting `selected` on <option>.

The selected attribute is a boolean attribute. It represents the default selectedness of the element.

https://www.w3.org/TR/2011/WD-html5-author-20110809/the-select-element.html

https://www.w3.org/TR/2011/WD-html5-author-20110809/the-option-element.html

[rachelnabors]

Hi there, could you recreate this in a codesandbox so I can confirm it reproduces?

[bvaughn]

@rachelnabors I converted the code snippet in the issue description into a Code Sandbox that repros: https://codesandbox.io/s/frosty-leftpad-n96nu?file=/src/App.js

I'm not sure I agree with the suggested outcome of this issue though, so I'm going to tag this as "discussion" for now.

[sivakusayan]

This warning also doesn't make sense if the select element has the multiple flag. In which case, the value attribute isn't sufficient here since it only takes at most one value.