From 09cf69ace83e33d66d809f9e37b7446618629be3 Mon Sep 17 00:00:00 2001 From: wbrgss Date: Wed, 15 Apr 2020 13:14:17 -0400 Subject: [PATCH 01/11] Add title PropType to Dropdowns --- src/components/Dropdown.react.js | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/src/components/Dropdown.react.js b/src/components/Dropdown.react.js index cb1738a6c..b521bd2e3 100644 --- a/src/components/Dropdown.react.js +++ b/src/components/Dropdown.react.js @@ -56,6 +56,14 @@ Dropdown.propTypes = { * If true, this option is disabled and cannot be selected. */ disabled: PropTypes.bool, + + /** + * The HTML 'title' attribute for the option. Allows for + * information on hover. For more information on this attribute, + * see https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/title + */ + title: PropTypes.string + }) ), From 5f23140f5031002cc34678e677eacfd250982697 Mon Sep 17 00:00:00 2001 From: wbrgss Date: Wed, 15 Apr 2020 13:21:39 -0400 Subject: [PATCH 02/11] No newline after PropType --- src/components/Dropdown.react.js | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/src/components/Dropdown.react.js b/src/components/Dropdown.react.js index b521bd2e3..604cebfe7 100644 --- a/src/components/Dropdown.react.js +++ b/src/components/Dropdown.react.js @@ -62,8 +62,7 @@ Dropdown.propTypes = { * information on hover. For more information on this attribute, * see https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/title */ - title: PropTypes.string - + title: PropTypes.string, }) ), From e301a81211c54d76ee84b60a7cffc50540c4535a Mon Sep 17 00:00:00 2001 From: wbrgss Date: Wed, 15 Apr 2020 16:03:49 -0400 Subject: [PATCH 03/11] Added CHANGELOG entry for exposing dcc.Dropdown option `title`s --- CHANGELOG.md | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index e81382643..f876df954 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -2,6 +2,10 @@ All notable changes to this project will be documented in this file. This project adheres to [Semantic Versioning](http://semver.org/). +## [Unreleased] - +## Changed +- [#793](https://github.com/plotly/dash-core-components/pull/793) Added title key (i.e. HTML `title` attribute) to option dicts in `dcc.Dropdown` `options[]` list property. + ## [1.9.1] - 2020-04-10 ### Changed - [#740](https://github.com/plotly/dash-core-components/pull/740) Keep components that are loading in the DOM, but not visible, as opposed to removing them entirely. This will ensure that the size of the component's container does not shrink or expand when the component goes into the loading state. From 5e9c3e01b7eee6b31723266086baa15b4d3e05d9 Mon Sep 17 00:00:00 2001 From: wbrgss Date: Wed, 15 Apr 2020 16:04:29 -0400 Subject: [PATCH 04/11] sub-heading --- CHANGELOG.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index f876df954..4c4589238 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -3,7 +3,7 @@ All notable changes to this project will be documented in this file. This project adheres to [Semantic Versioning](http://semver.org/). ## [Unreleased] - -## Changed +### Changed - [#793](https://github.com/plotly/dash-core-components/pull/793) Added title key (i.e. HTML `title` attribute) to option dicts in `dcc.Dropdown` `options[]` list property. ## [1.9.1] - 2020-04-10 From c38eb00c0da80ada166ebea3dc973fc91c5806da Mon Sep 17 00:00:00 2001 From: wbrgss Date: Wed, 15 Apr 2020 17:41:44 -0400 Subject: [PATCH 05/11] Integration test that checks for title attribute --- .../dropdown/test_option_title_prop.py | 54 +++++++++++++++++++ 1 file changed, 54 insertions(+) create mode 100644 tests/integration/dropdown/test_option_title_prop.py diff --git a/tests/integration/dropdown/test_option_title_prop.py b/tests/integration/dropdown/test_option_title_prop.py new file mode 100644 index 000000000..177320ea2 --- /dev/null +++ b/tests/integration/dropdown/test_option_title_prop.py @@ -0,0 +1,54 @@ +import pytest +import dash +from dash.dependencies import Input, Output +import dash_core_components as dcc +import dash_html_components as html + +from utils import wait_for + +@pytest.mark.DCC793 +@pytest.mark.parametrize("multi", [True, False]) +def test_ddot001_option_title(dash_dcc, multi): + app = dash.Dash(__name__) + app.layout = html.Div([ + dcc.Input( + id="dropdown_title_input", + type="text", + placeholder="Enter a title for New York City" + ), + dcc.Dropdown( + id="dropdown", + options=[ + {'label': 'New York City', 'value': 'NYC'}, + {'label': 'Montréal', 'value': 'MTL'}, + {'label': 'San Francisco', 'value': 'SF'} + ], + value='NYC', + multi=multi + ) + ]) + + @app.callback(Output("dropdown", "options"), [Input("dropdown_title_input", "value")]) + def add_title_to_option(title): + return [ + {'label': 'New York City', 'title': title, 'value': 'NYC'}, + {'label': 'Montréal', 'value': 'MTL'}, + {'label': 'San Francisco', 'value': 'SF'} + ] + + dash_dcc.start_server(app) + + dropdown_option_element = dash_dcc.wait_for_element("#dropdown .Select-value") + + dropdown_title_input = dash_dcc.wait_for_element("#dropdown_title_input") + + dropdown_title_input.send_keys("The Big Apple") + + wait_for( + lambda: dropdown_option_element.get_attribute("title") + == "The Big Apple", + lambda: '`title` is {}, expected {}'.format( + dropdown_option_element.get_attribute("title"), + "The Big Apple", + ), + ) From efb812a3831fe6db7499abcae6731bbf35b32e3e Mon Sep 17 00:00:00 2001 From: wbrgss Date: Wed, 15 Apr 2020 17:50:42 -0400 Subject: [PATCH 06/11] newline --- tests/integration/dropdown/test_option_title_prop.py | 1 + 1 file changed, 1 insertion(+) diff --git a/tests/integration/dropdown/test_option_title_prop.py b/tests/integration/dropdown/test_option_title_prop.py index 177320ea2..07abab325 100644 --- a/tests/integration/dropdown/test_option_title_prop.py +++ b/tests/integration/dropdown/test_option_title_prop.py @@ -6,6 +6,7 @@ from utils import wait_for + @pytest.mark.DCC793 @pytest.mark.parametrize("multi", [True, False]) def test_ddot001_option_title(dash_dcc, multi): From 41106531d9a8f91b9ad2eb0369a9f7dbd3c8eea8 Mon Sep 17 00:00:00 2001 From: wbrgss Date: Wed, 15 Apr 2020 18:03:57 -0400 Subject: [PATCH 07/11] UTF-8 encoding --- tests/integration/dropdown/test_option_title_prop.py | 2 ++ 1 file changed, 2 insertions(+) diff --git a/tests/integration/dropdown/test_option_title_prop.py b/tests/integration/dropdown/test_option_title_prop.py index 07abab325..bad268bcf 100644 --- a/tests/integration/dropdown/test_option_title_prop.py +++ b/tests/integration/dropdown/test_option_title_prop.py @@ -1,3 +1,5 @@ +# -*- coding: UTF-8 -*- + import pytest import dash from dash.dependencies import Input, Output From d5bee5d7602c7e0ff46e89c54ee9d015aaf405f9 Mon Sep 17 00:00:00 2001 From: wbrgss Date: Wed, 29 Apr 2020 17:16:43 -0400 Subject: [PATCH 08/11] Test other inputs + input clearing in dropdown title test --- .../dropdown/test_option_title_prop.py | 34 +++++++++++++++++++ 1 file changed, 34 insertions(+) diff --git a/tests/integration/dropdown/test_option_title_prop.py b/tests/integration/dropdown/test_option_title_prop.py index bad268bcf..a53cb45b8 100644 --- a/tests/integration/dropdown/test_option_title_prop.py +++ b/tests/integration/dropdown/test_option_title_prop.py @@ -45,6 +45,16 @@ def add_title_to_option(title): dropdown_title_input = dash_dcc.wait_for_element("#dropdown_title_input") + # Empty string title ('') (default for no title) + wait_for( + lambda: dropdown_option_element.get_attribute("title") + == '', + lambda: '`title` is {}, expected {}'.format( + dropdown_option_element.get_attribute("title"), + '', + ), + ) + dropdown_title_input.send_keys("The Big Apple") wait_for( @@ -55,3 +65,27 @@ def add_title_to_option(title): "The Big Apple", ), ) + + dropdown_title_input.clear() + + dropdown_title_input.send_keys("Gotham City?") + + wait_for( + lambda: dropdown_option_element.get_attribute("title") + == "Gotham City?", + lambda: '`title` is {}, expected {}'.format( + dropdown_option_element.get_attribute("title"), + "Gotham City?", + ), + ) + + dropdown_title_input.clear() + + wait_for( + lambda: dropdown_option_element.get_attribute("title") + == '', + lambda: '`title` is {}, expected {}'.format( + dropdown_option_element.get_attribute("title"), + '', + ), + ) From 31ec44c80c8ceafe55411c9a28ee789dfc5627de Mon Sep 17 00:00:00 2001 From: wbrgss Date: Wed, 29 Apr 2020 17:47:15 -0400 Subject: [PATCH 09/11] Replace clear() with Ctrl+A + Delete --- tests/integration/dropdown/test_option_title_prop.py | 8 ++++++-- 1 file changed, 6 insertions(+), 2 deletions(-) diff --git a/tests/integration/dropdown/test_option_title_prop.py b/tests/integration/dropdown/test_option_title_prop.py index a53cb45b8..015a9e60e 100644 --- a/tests/integration/dropdown/test_option_title_prop.py +++ b/tests/integration/dropdown/test_option_title_prop.py @@ -7,6 +7,7 @@ import dash_html_components as html from utils import wait_for +from selenium.webdriver.common.keys import Keys @pytest.mark.DCC793 @@ -66,7 +67,9 @@ def add_title_to_option(title): ), ) - dropdown_title_input.clear() + # For some reason, element.clear() doesn't work on either Chrome or CircleCI + dropdown_title_input.send_keys(Keys.CONTROL + "a") + dropdown_title_input.send_keys(Keys.DELETE); dropdown_title_input.send_keys("Gotham City?") @@ -79,7 +82,8 @@ def add_title_to_option(title): ), ) - dropdown_title_input.clear() + dropdown_title_input.send_keys(Keys.CONTROL + "a") + dropdown_title_input.send_keys(Keys.DELETE); wait_for( lambda: dropdown_option_element.get_attribute("title") From 1d57dbe56572f27f8066c47423d47b6596793c47 Mon Sep 17 00:00:00 2001 From: wbrgss Date: Wed, 29 Apr 2020 17:47:52 -0400 Subject: [PATCH 10/11] Semicolon --- tests/integration/dropdown/test_option_title_prop.py | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/tests/integration/dropdown/test_option_title_prop.py b/tests/integration/dropdown/test_option_title_prop.py index 015a9e60e..8dc50bb30 100644 --- a/tests/integration/dropdown/test_option_title_prop.py +++ b/tests/integration/dropdown/test_option_title_prop.py @@ -69,7 +69,7 @@ def add_title_to_option(title): # For some reason, element.clear() doesn't work on either Chrome or CircleCI dropdown_title_input.send_keys(Keys.CONTROL + "a") - dropdown_title_input.send_keys(Keys.DELETE); + dropdown_title_input.send_keys(Keys.DELETE) dropdown_title_input.send_keys("Gotham City?") @@ -83,7 +83,7 @@ def add_title_to_option(title): ) dropdown_title_input.send_keys(Keys.CONTROL + "a") - dropdown_title_input.send_keys(Keys.DELETE); + dropdown_title_input.send_keys(Keys.DELETE) wait_for( lambda: dropdown_option_element.get_attribute("title") From a8b67a0a98c5d510012ad92d3e8a2ab363e19b41 Mon Sep 17 00:00:00 2001 From: wbrgss Date: Thu, 30 Apr 2020 11:39:14 -0400 Subject: [PATCH 11/11] Use dash_dcc.clear_input() --- tests/integration/dropdown/test_option_title_prop.py | 8 ++------ 1 file changed, 2 insertions(+), 6 deletions(-) diff --git a/tests/integration/dropdown/test_option_title_prop.py b/tests/integration/dropdown/test_option_title_prop.py index 8dc50bb30..f6baa1c90 100644 --- a/tests/integration/dropdown/test_option_title_prop.py +++ b/tests/integration/dropdown/test_option_title_prop.py @@ -7,7 +7,6 @@ import dash_html_components as html from utils import wait_for -from selenium.webdriver.common.keys import Keys @pytest.mark.DCC793 @@ -67,9 +66,7 @@ def add_title_to_option(title): ), ) - # For some reason, element.clear() doesn't work on either Chrome or CircleCI - dropdown_title_input.send_keys(Keys.CONTROL + "a") - dropdown_title_input.send_keys(Keys.DELETE) + dash_dcc.clear_input(dropdown_title_input) dropdown_title_input.send_keys("Gotham City?") @@ -82,8 +79,7 @@ def add_title_to_option(title): ), ) - dropdown_title_input.send_keys(Keys.CONTROL + "a") - dropdown_title_input.send_keys(Keys.DELETE) + dash_dcc.clear_input(dropdown_title_input) wait_for( lambda: dropdown_option_element.get_attribute("title")