state.values does not update on props.value change

[UjinT34]

state.values does not update on props.value change.

state.values does not get filtered on props.options change. If new props.options does not contain one of previosly selected values than component crashes on https://github.com/agutoli/react-styled-select/blob/master/src/Select/Select.js#L295

[agutoli]

Hi, @UjinT34. Thank you to report the issue.

Can you send me the error stack or a screenshot, please?

[UjinT34]

TypeError: _this4.optionsMap[value] is undefined
renderSelectMultiValueWrapper/content<  offers:1531375476.js:8842:59
map self-hosted:292:17 renderSelectMultiValueWrapper    offers:1531375476.js:8838:21
render  offers:1531375476.js:9051:13
finishClassComponent    https://unpkg.com/react-dom@16.3.2/umd/react-dom.development.js:8835:24
updateClassComponent    https://unpkg.com/react-dom@16.3.2/umd/react-dom.development.js:8803:12
beginWork   https://unpkg.com/react-dom@16.3.2/umd/react-dom.development.js:9428:16
performUnitOfWork   https://unpkg.com/react-dom@16.3.2/umd/react-dom.development.js:12260:16
workLoop    https://unpkg.com/react-dom@16.3.2/umd/react-dom.development.js:12289:26
callCallback    https://unpkg.com/react-dom@16.3.2/umd/react-dom.development.js:140:9
k   offers:1531375476.js:24885:281
dispatchEvent   offers:1531375476.js:24890:411
invokeGuardedCallbackDev    https://unpkg.com/react-dom@16.3.2/umd/react-dom.development.js:178:7
invokeGuardedCallback   https://unpkg.com/react-dom@16.3.2/umd/react-dom.development.js:227:5
replayUnitOfWork    https://unpkg.com/react-dom@16.3.2/umd/react-dom.development.js:11764:7
renderRoot  https://unpkg.com/react-dom@16.3.2/umd/react-dom.development.js:12331:11
performWorkOnRoot   https://unpkg.com/react-dom@16.3.2/umd/react-dom.development.js:12895:24
performWork https://unpkg.com/react-dom@16.3.2/umd/react-dom.development.js:12816:9
performSyncWork https://unpkg.com/react-dom@16.3.2/umd/react-dom.development.js:12793:5
interactiveUpdates  https://unpkg.com/react-dom@16.3.2/umd/react-dom.development.js:13043:9
interactiveUpdates  https://unpkg.com/react-dom@16.3.2/umd/react-dom.development.js:2134:10
dispatchInteractiveEvent    https://unpkg.com/react-dom@16.3.2/umd/react-dom.development.js:4609:3
dispatchInteractiveEvent self-hosted:1028:17
k   offers:1531375476.js:24885:281

The above error occurred in the <WrapperSelect> component:
    in WrapperSelect (created by WrappedWrapperSelect)
    in WrappedWrapperSelect (created by Select)
    in Select (created by SelectIcons)
    in SelectIcons
    in Unknown (created by Connect(Component))
    in Connect(Component) (created by _class)
    in _class
    in div
    in div
    in div
    in Unknown (created by Connect(Component))
    in Connect(Component) (created by _class5)
    in div (created by _class5)
    in Provider (created by _class5)
    in _class5 (created by Connect(_class5))
    in Connect(_class5) (created by _class)
    in _class

code to test

const options1 = [
    {value: 1,  label: 'One'},
    {value: 2,  label: 'Two'},
];

const options2 = [
    {value: 3,  label: 'Three'},
    {value: 4,  label: 'Four'},
];

const SelectTest = class extends Component {
    state = {value: 0, clicked: false}

    handleChange = value => this.setState({value})

    handleClick = e => this.setState({clicked: !this.state.clicked})

    render() {
        const options = [{value: 0, label: 'Select any option and click the button'}].concat(this.state.clicked ? options2 : options1);
        return (
            <div>
                <Select value={this.state.value || "0"} options={options} onChange={this.handleChange}/>
                <button onClick={this.handleClick}>click me</button>
            </div>
        )
    }
}

1. select any option
2. click the button
3. try to select again

And another bug: integer 0 is not recognised as default value https://github.com/agutoli/react-styled-select/blob/master/src/Select/Select.js#L54

[agutoli]

@UjinT34 , plz try this new release v1.0.2

[UjinT34]

@agutoli, thank you :+1: