Next

CHANGELOG.md

@@ -1,3 +1,7 @@
+### v3.1.0
+*  CHORE (packages): updated dev dependency [View](https://github.com/sanusart/react-dropdown-select/commit/4441b36d8c734813582d920c5bcab7a31dd9accd)
+*  FIX (values): more proper values comparision closes #13 [View](https://github.com/sanusart/react-dropdown-select/commit/92172321d26ad436399b2eaea14deadfd143ba70)
+
 ### v3.0.0
 *  Revert "FIX (controll): allow to control select values externaly" [View](https://github.com/sanusart/react-dropdown-select/commit/c94d39f53e9304204e848e6db5f1120222940850)
 *  FIX (controll): allow to control select values externaly [View](https://github.com/sanusart/react-dropdown-select/commit/4de0041e11a6b54f851fc4d43b30e51be9c81fc8)

docs/src/examples/ExternalClear.js

@@ -4,13 +4,21 @@ import styled from '@emotion/styled';
 import Select from '../../../src';
 
 class ExternalClear extends Component {
-  state = { values: [] };
+  state = { values: [this.props.options[1]] };
 
   onChange = (values) =>
     this.setState({
       values
     });
 
+  onSet = (values) => {
+    const newValue = values.map((val) => ({ value: val.email, label: val.name }));
+
+    return this.setState({
+      values: [...this.state.values, ...newValue]
+    });
+  };
+
   render() {
     const { options, title } = this.props;
     return (
@@ -21,11 +29,12 @@ class ExternalClear extends Component {
             Source
           </a>
         </Title>
-        <p>I can be cleared from outside | <button href={() => null} onClick={() => this.onChange([])}>&times; clear</button></p>
+        <p>I can be cleared from outside by setting values to <code>[]</code> <button href={() => null} onClick={() => this.onChange([])}>&times; clear</button></p>
+        <p>Values can be added from outside <button href={() => null} onClick={() => this.onSet([options[Math.floor(Math.random() * (10 - 1) + 1)]])}>&raquo; set</button></p>
         <Select
           multi
           options={options}
-          values={this.state.values}
+          values={[...this.state.values]}
           onChange={(value) => {
             this.onChange(value);
             console.log(`%c > onChange ${title} `, 'background: #555; color: tomato', value);

docs/src/options.js

@@ -24,7 +24,6 @@ export const options = [
   },
   {
     id: 2,
-    disabled: true,
     name: "Ervin Howell",
     username: "Antonette",
     email: "Shanna@melissa.tv",
@@ -94,6 +93,7 @@ export const options = [
   },
   {
     id: 5,
+    disabled: true,
     name: "Chelsey Dietrich",
     username: "Kamren",
     email: "Lucio_Hettinger@annie.ca",

docs/src/pages/examples.js

@@ -93,7 +93,7 @@ const Examples = () => (
     </Wrapper>
 
     <Wrapper>
-      <ExternalClear options={demoOptions} title={`External clear control`} />
+      <ExternalClear options={demoOptions} title={`External clear and add`} />
     </Wrapper>
 
     <br />

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-dropdown-select",
-  "version": "3.0.0",
+  "version": "3.1.0",
   "description": "Customizable dropdown select for react",
   "main": "dist/react-dropdown-select.js",
   "module": "lib/index.js",

src/index.js

@@ -11,7 +11,7 @@ import Clear from './components/Clear';
 import Separator from './components/Separator';
 import DropdownHandle from './components/DropdownHandle';
 
-import { debounce, hexToRGBA } from './util';
+import { debounce, hexToRGBA, isEqual } from './util';
 import { LIB_NAME } from './constants';
 
 export class Select extends Component {
@@ -104,7 +104,10 @@ export class Select extends Component {
   }
 
   componentDidUpdate(prevProps, prevState) {
-    if (prevProps.values !== this.props.values && prevProps.values === prevState.values) {
+    if (
+      !isEqual(prevProps.values, this.props.values) &&
+      isEqual(prevProps.values, prevState.values)
+    ) {
       this.props.onChange(this.state.values);
       this.setState({
         values: this.props.values

src/util.js

@@ -22,3 +22,5 @@ export const debounce = (fn, delay = 0) => {
     }, delay);
   };
 };
+
+export const isEqual = (a, b) => JSON.stringify(a) === JSON.stringify(b);