Merge pull request plotly#2277 from plotly/update-dropdown-styles

Use dropdown styles from node_modules, instead of from stored css file

Author: T4rk1n

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
 

components/dash-core-components/src/components/css/[email protected]

@@ -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/[email protected]';
 import '../components/css/Dropdown.css';
 

components/dash-core-components/src/fragments/Dropdown.react.js

@@ -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"