Ensure non-clearable dropdowns are actually not clearable. (plotly#731)

* Fix clearable bug for single-option dropdowns.

* Fix clearable bug for multi-option dropdowns.

* Update CHANGELOG.

* Return if selected option is nil and dropdown is not clearable.

* Use backspaceRemoves and deleteRemoves.

Co-authored-by: Marc-André Rivet <[email protected]>

Author: 2 people

CHANGELOG.md

@@ -19,6 +19,9 @@ This project adheres to [Semantic Versioning](http://semver.org/).
   - Added responsiveness on graph parent element resize (previously only worked on window.resize)
   - Added new `dash-graph--pending` class to dcc.Graph, present while resizing, (re-)rendering, loading
 
+### Fixed
+- [#731](https://github.com/plotly/dash-core-components/pull/731) Fixed bug where non-clearable dropdowns could still be cleared by typing backspace
+
 ### Changed
 - [#723](https://github.com/plotly/dash-core-components/pull/723) Changed npm package content to allow source code inclusion from other projects
 - [#725](https://github.com/plotly/dash-core-components/pull/725) Improve async graph performance by parallelizing resource fetching instead of fetching sequentially

src/fragments/Dropdown.react.js

@@ -46,6 +46,7 @@ export default class Dropdown extends Component {
     render() {
         const {
             id,
+            clearable,
             multi,
             options,
             setProps,
@@ -92,6 +93,8 @@ export default class Dropdown extends Component {
                         }
                     }}
                     onInputChange={search_value => setProps({search_value})}
+                    backspaceRemoves={clearable}
+                    deleteRemoves={clearable}
                     {...omit(['setProps', 'value'], this.props)}
                 />
             </div>

tests/integration/dropdown/test_clearable_false.py

@@ -0,0 +1,78 @@
+import dash
+from dash.dependencies import Input, Output
+import dash_core_components as dcc
+import dash_html_components as html
+
+from selenium.webdriver.common.keys import Keys
+
+
+def test_ddcf001_clearable_false_single(dash_duo):
+    app = dash.Dash(__name__)
+    app.layout = html.Div([
+        dcc.Dropdown(
+            id='my-unclearable-dropdown',
+            options=[
+                {'label': 'New York City', 'value': 'NYC'},
+                {'label': 'Montreal', 'value': 'MTL'},
+                {'label': 'San Francisco', 'value': 'SF'},
+            ],
+            value='MTL',
+            clearable=False
+        ),
+        html.Div(
+            id='dropdown-value',
+            style={'height': '10px', 'width': '10px'}
+        )
+    ])
+
+    @app.callback(
+        Output('dropdown-value', 'children'),
+        [Input('my-unclearable-dropdown', 'value')]
+    )
+    def update_value(val):
+        return val
+
+    dash_duo.start_server(app)
+
+    dropdown = dash_duo.find_element('#my-unclearable-dropdown input')
+    dropdown.send_keys(Keys.BACKSPACE)
+    dash_duo.find_element('#dropdown-value').click()
+
+    assert len(dash_duo.find_element('#dropdown-value').text) > 0
+
+
+def test_ddcf002_clearable_false_multi(dash_duo):
+    app = dash.Dash(__name__)
+    app.layout = html.Div([
+        dcc.Dropdown(
+            id='my-unclearable-dropdown',
+            options=[
+                {'label': 'New York City', 'value': 'NYC'},
+                {'label': 'Montreal', 'value': 'MTL'},
+                {'label': 'San Francisco', 'value': 'SF'},
+            ],
+            value=['MTL', 'SF'],
+            multi=True,
+            clearable=False
+        ),
+        html.Div(
+            id='dropdown-value',
+            style={'height': '10px', 'width': '10px'}
+        )
+    ])
+
+    @app.callback(
+        Output('dropdown-value', 'children'),
+        [Input('my-unclearable-dropdown', 'value')]
+    )
+    def update_value(val):
+        return ', '.join(val)
+
+    dash_duo.start_server(app)
+
+    dropdown = dash_duo.find_element('#my-unclearable-dropdown input')
+    dropdown.send_keys(Keys.BACKSPACE)
+    dropdown.send_keys(Keys.BACKSPACE)
+    dash_duo.find_element('#dropdown-value').click()
+
+    assert len(dash_duo.find_element('#dropdown-value').text) > 0