diff --git a/examples/src/components/Tags.js b/examples/src/components/Tags.js index 7d8dcc06..63aa0ae0 100644 --- a/examples/src/components/Tags.js +++ b/examples/src/components/Tags.js @@ -26,6 +26,13 @@ export default class Tags extends Component { { text: 'documents', id: 3 }, { text: 'discussion', id: 4 }, ], + value11: 1, + data11: [ + { text: 'bug', id: 1 }, + { text: 'feature', id: 2 }, + { text: 'documents', id: 3 }, + { text: 'discussion', id: 4 }, + ], placeholder9: 'search by tags', }; } @@ -287,6 +294,28 @@ export default class Tags extends Component { ); } + example11() { + const { value11, data11 } = this.state; + return ( +
+ Add a new item and set a new `onChange` event
+ { this.setState({ value11: e.target.value }); }} + options={{ + placeholder: 'search by tags', + allowClear: true, + }} + /> + — + Click "x" to clear +
+ ); + } + render() { return (
@@ -299,7 +328,7 @@ export default class Tags extends Component { {this.example7()}
{this.example8()}
{this.example9()}
- {this.example10()}
+ {this.example11()}
); } diff --git a/src/components/Select2.js b/src/components/Select2.js index b9adddea..046e0e16 100644 --- a/src/components/Select2.js +++ b/src/components/Select2.js @@ -105,7 +105,7 @@ export default class Select2 extends Component { const newValue = this.prepareValue(value, defaultValue); const currentValue = multiple ? this.el.val() || [] : this.el.val(); - if (!shallowEqualFuzzy(currentValue, newValue) || this.forceUpdateValue) { + if (!this.fuzzyValuesEqual(currentValue, newValue) || this.forceUpdateValue) { const onChange = this.props.onChange; if (this.initialRender && onChange) { @@ -121,6 +121,11 @@ export default class Select2 extends Component { } } + fuzzyValuesEqual(currentValue, newValue) { + return (currentValue === null && newValue === '') || + shallowEqualFuzzy(currentValue, newValue); + } + destroySelect2(withCallbacks = true) { if (withCallbacks) { this.detachEventHandlers();