Merge pull request #65 from jordanbyron/fix-allow-clear

Fix allowClear option [Closes #63]

Author: rkit

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 (
+      <div>
+        Add a new item and set a new `onChange` event<br/>
+        <Select2
+          multiple={false}
+          data={data11}
+          defaultValue={ 1 }
+          value={ value11 }
+          onChange={(e) => { this.setState({ value11: e.target.value }); }}
+          options={{
+            placeholder: 'search by tags',
+            allowClear: true,
+          }}
+        />
+        —
+        Click "x" to clear
+      </div>
+    );
+  }
+
   render() {
     return (
       <div>
@@ -299,7 +328,7 @@ export default class Tags extends Component {
         {this.example7()}<br/>
         {this.example8()}<br/>
         {this.example9()}<br/>
-        {this.example10()}<br/>
+        {this.example11()}<br/>
       </div>
     );
   }

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();