diff --git a/CHANGELOG.md b/CHANGELOG.md index 64ab900794..ef21e5d645 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -27,6 +27,7 @@ This project adheres to [Semantic Versioning](https://semver.org/). - [#2265](https://github.com/plotly/dash/pull/2265) Removed deprecated `before_first_request` as reported in [#2177](https://github.com/plotly/dash/issues/2177). - [#2257](https://github.com/plotly/dash/pull/2257) Fix tuple types in the TypeScript component generator. - [#2293](https://github.com/plotly/dash/pull/2293) Fix Dropdown useMemo not detecting equal objects +- [#2277](https://github.com/plotly/dash/pull/2277) Use dropdown styles from node_modules, instead of from stored css file ### Changed diff --git a/components/dash-core-components/src/components/css/react-virtualized-select@3.1.0.css b/components/dash-core-components/src/components/css/react-virtualized-select@3.1.0.css deleted file mode 100644 index ba437b9427..0000000000 --- a/components/dash-core-components/src/components/css/react-virtualized-select@3.1.0.css +++ /dev/null @@ -1,22 +0,0 @@ -.VirtualSelectGrid { - z-index: 1; -} - -.VirtualizedSelectOption { - display: -webkit-box; - display: -ms-flexbox; - display: flex; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - padding: 0 .5rem; -} -.VirtualizedSelectFocusedOption { - background-color: rgba(0, 126, 255, 0.1); -} -.VirtualizedSelectDisabledOption { - opacity: 0.5; -} -.VirtualizedSelectSelectedOption { - font-weight: bold; -} diff --git a/components/dash-core-components/src/fragments/Dropdown.react.js b/components/dash-core-components/src/fragments/Dropdown.react.js index 1812f6fa1f..0464fb8ff4 100644 --- a/components/dash-core-components/src/fragments/Dropdown.react.js +++ b/components/dash-core-components/src/fragments/Dropdown.react.js @@ -2,7 +2,7 @@ import {isNil, pluck, without, pick} from 'ramda'; import React, {useState, useCallback, useEffect, useMemo, useRef} from 'react'; import ReactDropdown from 'react-virtualized-select'; import createFilterOptions from 'react-select-fast-filter-options'; -import '../components/css/react-virtualized-select@3.1.0.css'; +import 'react-virtualized-select/styles.css'; import '../components/css/react-virtualized@9.9.0.css'; import '../components/css/Dropdown.css'; diff --git a/components/dash-core-components/tests/integration/dropdown/test_styles.py b/components/dash-core-components/tests/integration/dropdown/test_styles.py new file mode 100644 index 0000000000..6850909287 --- /dev/null +++ b/components/dash-core-components/tests/integration/dropdown/test_styles.py @@ -0,0 +1,44 @@ +from dash import Dash +from dash.dcc import Dropdown +from dash.html import Div +from dash.dash_table import DataTable + + +def test_ddst001_cursor_should_be_pointer(dash_duo): + app = Dash(__name__) + app.layout = Div( + [ + Dropdown( + id="dropdown", + options=[ + {"label": "New York City", "value": "NYC"}, + {"label": "Montreal", "value": "MTL"}, + {"label": "San Francisco", "value": "SF"}, + ], + value="NYC", + ), + DataTable( + id="table", + columns=[ + {"name": x, "id": x, "selectable": True} for x in ["a", "b", "c"] + ], + editable=True, + row_deletable=True, + fixed_rows=dict(headers=True), + fixed_columns=dict(headers=True), + data=[ + {"a": "a" + str(x), "b": "b" + str(x), "c": "c" + str(x)} + for x in range(0, 20) + ], + ), + ] + ) + + dash_duo.start_server(app) + + dash_duo.find_element("#dropdown").click() + dash_duo.wait_for_element("#dropdown .Select-menu-outer") + + items = dash_duo.find_elements("#dropdown .Select-menu-outer .VirtualizedSelectOption") + + assert items[0].value_of_css_property('cursor') == "pointer"