Two chips added when clicking autocomplete menu item about material-ui-chip-input

@leMaik, I found this bug too 😕

class DoubleChipApp extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            tags: []
        };
    }

    handleRequestAdd(chip) {
        console.log('added chip', chip)
        const addToEnd = function (array, item) {
            array.push(item);
            return array;
        };
        this.setState((prevState, props) => ({
            tags: addToEnd(prevState.tags, chip)
        }));
        return true;
    }

    handleRequestDelete(chip) {
        this.setState((prevState, props) => ({
            tags: prevState.tags.filter((tag) => tag !== chip)
        }));
        return true;
    }

    render() {
        return (
            <MuiThemeProvider>
                <ChipInput value={this.state.tags}
                           openOnFocus
                           dataSource={['one', 'two']}
                           onRequestAdd={this.handleRequestAdd.bind(this)}
                           onRequestDelete={this.handleRequestDelete.bind(this)}
                />
            </MuiThemeProvider>
        )
    };
}

ReactDOM.render(
    <DoubleChipApp />,
    document.getElementById('app'),
);

[leMaik]

I'm afraid I can't reproduce this bug. Could you please provide code that reproduces the bug?

[leMaik]

I'll fix this later, thanks for the example! 👍

[leMaik]

Fixed it, will release soon. 🎉

@sever2715 You are mutating the state in handleRequestAdd by using push, which modifies the array. You should better create a new array that has the new chip added, e.g. with [...array, item]. That way, you would work around the bug because calling handleRequestAdd wouldn't have any side-effects. 😉

@leMaik thank you for your advice, but I already used another hack(my app is async - therefore it is necessary to consider the previous state).
☺️ 👾