FIX (clear search props): add clearOnBlur and clearOnSelect

sanusart · Feb 26, 2019 · edc348e · edc348e
1 parent 72755df
commit edc348e
Show file tree

Hide file tree

Showing 4 changed files with 19 additions and 5 deletions.
diff --git a/README.md b/README.md
@@ -65,6 +65,9 @@ and use as:
 | values                                                                                      | array       | []             | Selected values                                                                                                                        |
 | options                                                                                     | array       | []             | Available options, (option with key `disabled: true` will be disabled)                                                                 |
 | keepOpen                                                                                    | bool        | false          | If true, dropdown will always stay open (good for debugging)                                                                           |
+| autoFocus                                                                                   | bool        | false          | If true, and `searchable`, dropdown will auto focus                                                                                    |
+| clearOnBlur                                                                                 | bool        | true           | If true, and `searchable`, search value will be cleared on blur                                                                        |
+| clearOnSelect                                                                               | bool        | true           | If true, and `searchable`, search value will be cleared upon value select/de-select                                                    |
 | name                                                                                        | string      | null           | If set, input type hidden would be added in the component with the value of the `name` prop as name and select's `values` as value     |
 | dropdownGap                                                                                 | number      | 5              | Gap between select element and dropdown                                                                                                |
 | multi                                                                                       | bool        | false          | If true - will act as multi-select, if false - only one option will be selected at the time                                            |

diff --git a/docs/src/pages/api.md b/docs/src/pages/api.md
@@ -11,7 +11,9 @@ title: 'API'
 | values                                                                                      | array       | []             | Selected values                                                                                                                        |
 | options                                                                                     | array       | []             | Available options, (option with key `disabled: true` will be disabled)                                                                 |
 | keepOpen                                                                                    | bool        | false          | If true, dropdown will always stay open (good for debugging)                                                                           |
-| autoFocus                                                                                    | bool        | false          | If true, and `searchable`, dropdown will auto focus                                                                           |
+| autoFocus                                                                                   | bool        | false          | If true, and `searchable`, dropdown will auto focus                                                                                    |
+| clearOnBlur                                                                                 | bool        | true           | If true, and `searchable`, search value will be cleared on blur                                                                        |
+| clearOnSelect                                                                               | bool        | true           | If true, and `searchable`, search value will be cleared upon value select/de-select                                                    |
 | name                                                                                        | string      | null           | If set, input type hidden would be added in the component with the value of the `name` prop as name and select's `values` as value     |
 | dropdownGap                                                                                 | number      | 5              | Gap between select element and dropdown                                                                                                |
 | multi                                                                                       | bool        | false          | If true - will act as multi-select, if false - only one option will be selected at the time                                            |

diff --git a/package.json b/package.json
@@ -4,6 +4,10 @@
   "description": "Customizable dropdown select for react",
   "main": "dist/react-dropdown-select.js",
   "module": "src/index.js",
+  "files": [
+    "dist",
+    "src"
+  ],
   "scripts": {
     "test": "jest --bail && npm run prepublishOnly && bundlesize",
     "test:watch": "jest --bail --watch && npm run prepublishOnly && bundlesize",

diff --git a/src/index.js b/src/index.js
@@ -175,7 +175,9 @@ export class Select extends Component {
 
     if (action === 'close' && this.state.dropdown) {
       this.select.current.blur();
-      return this.setState({ dropdown: false, search: '' });
+
+      this.props.clearOnBlur && this.setState({ search: '' });
+      return this.setState({ dropdown: false });
     }
 
     if (action === 'open' && !this.state.dropdown) {
@@ -204,11 +206,12 @@ export class Select extends Component {
     } else {
       this.setState({
         values: [item],
-        dropdown: false,
-        search: ''
+        dropdown: false
       });
     }
 
+    this.props.clearOnSelect && this.setState({ search: '' });
+
     return true;
   };
 
@@ -432,7 +435,7 @@ export class Select extends Component {
 }
 
 Select.defaultProps = {
-  addPlaceholder: "",
+  addPlaceholder: '',
   placeholder: 'Select...',
   values: [],
   options: [],
@@ -456,6 +459,8 @@ Select.defaultProps = {
   color: '#0074D9',
   keepSelectedInList: true,
   closeOnSelect: false,
+  clearOnBlur: true,
+  clearOnSelect: true,
   dropdownPosition: 'bottom',
   dropdownHeight: '300px',
   autoFocus: false,