Polaris-react: Select Console Error: Select elements must be either controlled or uncontrolled

Created on 17 Jun 2017 · 9Comments · Source: Shopify/polaris-react

Issue summary

When I add a Select component to my page and include a value, I receive the following console warning.

Warning: Select elements must be either controlled or uncontrolled (specify either the value prop, or the defaultValue prop, but not both). Decide between using a controlled or uncontrolled select element and remove one of these props. More info: https://fb.me/react-controlled-components

Steps to Reproduce the Problem

Add a Select Component to the page. Example:

<Select 
    id="data_sort" 
    label="Sort Data" 
    placeholder="Sort Data" 
    labelHidden
    options={[
      {'value': 'created_at', 'label': 'Creation Date'},
      {'value': 'alphabetical', 'label': 'A to Z'}
    ]}
    value="created_at"
    onChange={(val) => {
      console.log(val);
    }}
/>

Check console when page loads. The warning will be there.

Specifications

Polaris version: 1.0.3
React version: 15.5.4
Browser: Chrome
Device: Macbook Air
Operating System: OSX 10.12.5

Source

cgenevier

Most helpful comment

We've got a fix merged in, and we plan on doing a release in the next couple days.

lemonmade on 20 Jul 2017

👍3

All 9 comments

Hey @cgenevier, thanks for the issue. The warning shouldn’t be leading to any actual errors on the page, which is good. If you want to fully get rid of it, you must manage the value prop by storing it in state, updating it in the onChange callback, and passing it along to the Select. This switches the underlying select element from being “unmanaged” (value changes freely outside of the context of React) to being “managed” (you control the value at all times inside of React). Hope that helps!

lemonmade on 18 Jun 2017

Hi @lemonmade,

Thanks for the reply! I replaced the code with the following and am still getting the console error:

<Select
    id="data_sort"
    label="Sort Data"
    placeholder="Sort Data"
    labelHidden
    options={[
      {'value': 'created_at', 'label': 'Creation Date'},
      {'value': 'alphabetical', 'label': 'A to Z'}
    ]}
    value={this.state.data_sort}
    onChange={(val) => {
        this.setState({data_sort: val});
    }}
/>

Noted that it doesn't cause any errors on the page, which is great, but it'd be nice to clean up the console from warnings too. Thanks so much in advance!

cgenevier on 18 Jun 2017

Does this.state.data_sort start off as undefined? If so, you have a similar problem to before. You need to start the value off with a non-undefined value.

lemonmade on 18 Jun 2017

No, this.state.data_sort is set in the constructor to 'created_at'.

cgenevier on 18 Jun 2017

This error comes from source code of Select component (https://github.com/Shopify/polaris/blob/master/src/components/Select/Select.tsx)

The defaultValue is set on line 101:
`

id={id}
name={name}
value={value}
defaultValue={PLACEHOLDER_VALUE}
className={styles.Input}
disabled={disabled}
onFocus={onFocus}
onBlur={onBlur}
onChange={handleChange}
aria-invalid={Boolean(error)}
aria-describedby={describedBy.length ? describedBy.join(' ') : undefined}