react / react/react

Bug: React throws warning on browser default function

Open
#18,965 7 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Component: DOM Type: Discussion
Dominant language
JavaScript
Stars
251k
Forks
51.4k
Avg merge
2d 4h
Merged PRs (30d)
53

Description

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.

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start with the minimal / reproduction in the issue and verify the warning in a development build. Determine whether the warning can be removed while preserving the browser's selected-option behavior, then confirm the result with an equivalent reproduction; no source file or test is identified in the report.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript, react
Domain
frontend
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.