diff --git a/CHANGELOG.md b/CHANGELOG.md index 06442f68d..2cfc26492 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -2,7 +2,9 @@ All notable changes to this project will be documented in this file. This project adheres to [Semantic Versioning](http://semver.org/). -## [Unreleased] +## [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. ### Fixed - [#790](https://github.com/plotly/dash-core-components/pull/790) Fixed bug where the dcc.Dropdown dropdown was hidden by the dash_table.DataTable fixed rows and columns. diff --git a/src/components/Dropdown.react.js b/src/components/Dropdown.react.js index cb1738a6c..604cebfe7 100644 --- a/src/components/Dropdown.react.js +++ b/src/components/Dropdown.react.js @@ -56,6 +56,13 @@ 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, }) ), 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..f6baa1c90 --- /dev/null +++ b/tests/integration/dropdown/test_option_title_prop.py @@ -0,0 +1,91 @@ +# -*- coding: UTF-8 -*- + +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") + + # 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( + lambda: dropdown_option_element.get_attribute("title") + == "The Big Apple", + lambda: '`title` is {}, expected {}'.format( + dropdown_option_element.get_attribute("title"), + "The Big Apple", + ), + ) + + dash_dcc.clear_input(dropdown_title_input) + + 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?", + ), + ) + + dash_dcc.clear_input(dropdown_title_input) + + wait_for( + lambda: dropdown_option_element.get_attribute("title") + == '', + lambda: '`title` is {}, expected {}'.format( + dropdown_option_element.get_attribute("title"), + '', + ), + )