Select Console Error: Select elements must be either controlled or uncontrolled

[cgenevier]

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

1. 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);
    }}
/>

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

[lemonmade]

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!

[cgenevier]

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!

[lemonmade]

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.

[cgenevier]

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

[hallenmaia]

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:
<div className={className}> <select 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} >

When I comment the line 101 (defaultValue={PLACEHOLDER_VALUE}) I dont't get the error.

[lemonmade]

This is an issue with how we are doing the placeholder value. We'll take a look at this and release a fix soon.

[nerfologist]

Any update on this?

[lemonmade]

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

[dfmcphee]

This was resolved in a previous release.

[kiewfenix]

This is an issue with how we are doing the placeholder value. We'll take a look at this and release a fix soon.

yeah, simple delete defaultValue , and set default for value prop