Fix x behaviour

CHANGELOG.md

@@ -2,6 +2,14 @@
 All notable changes to this project will be documented in this file.
 This project adheres to [Semantic Versioning](http://semver.org/).
 
+## [0.7.0] - 2017-07-20
+### Added
+- The `clearable` property to the `Dropdown`, which toggles on and off the "x" on the side of the dropdown that clears the current selection.
+- The `searchable` property to the `Dropdown`, which toggles on and off whether the `Dropdown` is searchable.
+
+### Fixed
+- Clicking on the little `x` on the side of the Dropdown to clear the currently selected value didn't work. Now it does. If `multi=false`, then `null` (or Python's `None`) is set. If `multi=True`, then `[]` is set.
+
 ## [0.6.0] - 2017-07-18
 ### Added
 - The `Slider` and the `RangeSlider` component can update when the user finishes dragging the slider rather than just while they drag. The default behaviour has remained the same (updates while dragging) but you can toggle that the updates only get fired on "mouse up" by setting `updatemode` to `'mouseup'` (`'drag'` is the default).

dash_core_components/metadata.json

@@ -139,19 +139,38 @@
         "required": false,
         "description": ""
       },
+      "clearable": {
+        "type": {
+          "name": "bool"
+        },
+        "required": false,
+        "description": "Whether or not the dropdown is \"clearable\", that is, whether or\nnot a small \"x\" appears on the right of the dropdown that removes\nthe selected value.",
+        "defaultValue": {
+          "value": "true",
+          "computed": false
+        }
+      },
       "disabled": {
         "type": {
           "name": "bool"
         },
         "required": false,
-        "description": "If true, the option is disabled"
+        "description": "If true, the option is disabled",
+        "defaultValue": {
+          "value": "false",
+          "computed": false
+        }
       },
       "multi": {
         "type": {
           "name": "bool"
         },
         "required": false,
-        "description": "If true, the user can select multiple values"
+        "description": "If true, the user can select multiple values",
+        "defaultValue": {
+          "value": "false",
+          "computed": false
+        }
       },
       "options": {
         "type": {
@@ -184,6 +203,17 @@
         "required": false,
         "description": "The grey, default text shown when no option is selected"
       },
+      "searchable": {
+        "type": {
+          "name": "bool"
+        },
+        "required": false,
+        "description": "Whether to enable the searching feature or not",
+        "defaultValue": {
+          "value": "true",
+          "computed": false
+        }
+      },
       "value": {
         "type": {
           "name": "union",

dash_core_components/version.py

@@ -1 +1 @@
-__version__ = '0.6.0'
+__version__ = '0.7.0'

package.json

@@ -1,6 +1,6 @@
 {
   "name": "dash-core-components",
-  "version": "0.6.0",
+  "version": "0.7.0",
   "description": "Core component suite for Dash",
   "repository": {
     "type": "git",

src/components/Dropdown.react.js

@@ -40,12 +40,23 @@ export default class Dropdown extends Component {
                     value={selectedValue}
                     onChange={selectedOption => {
                         if (multi) {
-                            const values = R.pluck('value', selectedOption);
-                            this.setState({value: values});
-                            if (setProps) setProps({value: values});
+                            let value;
+                            if (R.isNil(selectedOption)) {
+                                value = []
+                            } else {
+                                value = R.pluck('value', selectedOption);
+                            }
+                            this.setState({value});
+                            if (setProps) setProps({value});
                         } else {
-                            this.setState({value: selectedOption.value});
-                            if (setProps) setProps({value: selectedOption.value});
+                            let value;
+                            if (R.isNil(selectedOption)) {
+                                value = null
+                            } else {
+                                value = selectedOption.value;
+                            }
+                            this.setState({value});
+                            if (setProps) setProps({value});
                         }
                         if (fireEvent) fireEvent('change');
                     }}
@@ -60,6 +71,14 @@ Dropdown.propTypes = {
     id: PropTypes.string,
 
     className: PropTypes.string,
+
+    /**
+     * Whether or not the dropdown is "clearable", that is, whether or
+     * not a small "x" appears on the right of the dropdown that removes
+     * the selected value.
+     */
+    clearable: PropTypes.bool,
+
     /**
      * If true, the option is disabled
      */
@@ -83,6 +102,11 @@ Dropdown.propTypes = {
      */
     placeholder: PropTypes.string,
 
+    /**
+     * Whether to enable the searching feature or not
+     */
+    searchable: PropTypes.bool,
+
     /**
      * The value of the input. If `multi` is false (the default)
      * then value is just a string that corresponds to the values
@@ -103,3 +127,10 @@ Dropdown.propTypes = {
 
     dashEvents: PropTypes.oneOf(['change'])
 };
+
+Dropdown.defaultProps = {
+    clearable: true,
+    disabled: false,
+    multi: false,
+    searchable: true
+}