Fix dropdown integration tests

Author: KoolADE85

components/dash-core-components/src/components/css/dropdown.css

@@ -100,7 +100,7 @@
 }
 
 .dash-dropdown-search-icon,
-.dash-dropdown-search-clear {
+.dash-dropdown-clear {
     width: calc(var(--Dash-Spacing) * 3);
     height: calc(var(--Dash-Spacing) * 3);
 }
@@ -109,7 +109,7 @@
     color: var(--Dash-Fill-Interactive-Strong);
 }
 
-.dash-dropdown-search-clear {
+.dash-dropdown-clear {
     background: none;
     border: none;
     cursor: pointer;
@@ -121,11 +121,11 @@
     color: var(--Dash-Text-Strong);
 }
 
-.dash-dropdown-search-clear:hover {
+.dash-dropdown-clear:hover {
     color: var(--Dash-Fill-Interactive-Strong);
 }
 
-.dash-dropdown-search-clear:focus {
+.dash-dropdown-clear:focus {
     outline: 2px solid var(--Dash-Fill-Interactive-Strong);
     outline-offset: 1px;
     border-radius: 2px;
@@ -139,6 +139,17 @@
     color: var(--Dash-Text-Strong);
     outline: none;
     padding: 0;
+
+    /* Hide the "x" clear button in search inputs */
+    &::-webkit-search-cancel-button {
+        -webkit-appearance: none;
+        appearance: none;
+        display: none;
+    }
+
+    &::-ms-clear {
+        display: none;
+    }
 }
 
 .dash-dropdown-actions {

components/dash-core-components/src/fragments/Dropdown.tsx

@@ -63,6 +63,11 @@ const DropdownOption: React.FC<DropdownOptionProps> = ({
             <input
                 type="checkbox"
                 checked={isSelected}
+                value={
+                    typeof option.value === 'boolean'
+                        ? `${option.value}`
+                        : option.value
+                }
                 disabled={!!option.disabled}
                 onChange={() => onClick(option)}
                 readOnly
@@ -449,7 +454,7 @@ const Dropdown = (props: DropdownProps) => {
                         )}
                         {clearable && !disabled && !!sanitizedValues.length && (
                             <a
-                                className="dash-dropdown-search-clear"
+                                className="dash-dropdown-clear"
                                 onClick={e => {
                                     e.preventDefault();
                                     handleClear();
@@ -493,7 +498,7 @@ const Dropdown = (props: DropdownProps) => {
                                 {search_value && (
                                     <button
                                         type="button"
-                                        className="dash-dropdown-search-clear"
+                                        className="dash-dropdown-clear"
                                         onClick={handleClearSearch}
                                         aria-label="Clear search"
                                     >
@@ -544,6 +549,12 @@ const Dropdown = (props: DropdownProps) => {
                                         />
                                     );
                                 })}
+                                {search_value &&
+                                    displayOptions.length === 0 && (
+                                        <span className="dash-dropdown-option">
+                                            No options found
+                                        </span>
+                                    )}
                             </div>
                         )}
                     </Popover.Content>

components/dash-core-components/tests/integration/dropdown/test_clearable_false.py

@@ -1,6 +1,7 @@
+import pytest
 from dash import Dash, Input, Output, dcc, html
-
-from selenium.webdriver.common.keys import Keys
+from selenium.common.exceptions import TimeoutException
+from selenium.webdriver.support.ui import WebDriverWait
 
 
 def test_ddcf001_clearable_false_single(dash_duo):
@@ -30,12 +31,23 @@ def update_value(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()
+    with pytest.raises(TimeoutException):
+        WebDriverWait(dash_duo.driver, 1).until(
+            lambda _: dash_duo.find_element(
+                "#my-unclearable-dropdown .dash-dropdown-clear"
+            )
+        )
+
+    output_text = dash_duo.find_element("#dropdown-value").text
 
-    assert len(dash_duo.find_element("#dropdown-value").text) > 0
+    dash_duo.find_element("#my-unclearable-dropdown ").click()
 
+    # Clicking the selected item should not de-select it.
+    selected_item = dash_duo.find_element(
+        f'#my-unclearable-dropdown input[value="{output_text}"]'
+    )
+    selected_item.click()
+    assert dash_duo.find_element("#dropdown-value").text == output_text
     assert dash_duo.get_logs() == []
 
 
@@ -52,6 +64,7 @@ def test_ddcf002_clearable_false_multi(dash_duo):
                 ],
                 value=["MTL", "SF"],
                 multi=True,
+                closeOnSelect=False,
                 clearable=False,
             ),
             html.Div(id="dropdown-value", style={"height": "10px", "width": "10px"}),
@@ -67,11 +80,22 @@ def update_value(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()
+    with pytest.raises(TimeoutException):
+        WebDriverWait(dash_duo.driver, 1).until(
+            lambda _: dash_duo.find_element(
+                "#my-unclearable-dropdown .dash-dropdown-clear"
+            )
+        )
+
+    assert dash_duo.find_element("#dropdown-value").text == "MTL, SF"
+
+    dash_duo.find_element("#my-unclearable-dropdown ").click()
+
+    # Attempt to deselect all items. Everything should deselect until we get to
+    # the last item which cannot be cleared.
+    selected = dash_duo.find_elements("#my-unclearable-dropdown input[checked]")
+    [el.click() for el in selected]
 
-    assert len(dash_duo.find_element("#dropdown-value").text) > 0
+    assert dash_duo.find_element("#dropdown-value").text == "SF"
 
     assert dash_duo.get_logs() == []

components/dash-core-components/tests/integration/dropdown/test_dynamic_options.py

@@ -27,30 +27,34 @@ def update_options(search_value):
 
     dash_dcc.start_server(app)
 
+    dropdown = dash_dcc.find_element("#my-dynamic-dropdown")
+    dropdown.click()
+
     # Get the inner input used for search value.
     input_ = dash_dcc.find_element("#my-dynamic-dropdown input")
 
     # Focus on the input to open the options menu
     input_.send_keys("x")
 
     # No options to be found with `x` in them, should show the empty message.
-    dash_dcc.wait_for_text_to_equal(".Select-noresults", "No results found")
+    dash_dcc.wait_for_text_to_equal(".dash-dropdown-options", "No options found")
 
     input_.clear()
     input_.send_keys("o")
 
-    options = dash_dcc.find_elements("#my-dynamic-dropdown .VirtualizedSelectOption")
+    time.sleep(0.25)
+    options = dash_dcc.find_elements("#my-dynamic-dropdown .dash-dropdown-option")
 
     # Should show all options.
     assert len(options) == 3
 
     # Searching for `on`
     input_.send_keys("n")
 
-    options = dash_dcc.find_elements("#my-dynamic-dropdown .VirtualizedSelectOption")
+    time.sleep(0.25)
+    options = dash_dcc.find_elements("#my-dynamic-dropdown .dash-dropdown-option")
 
     assert len(options) == 1
-    print(options)
     assert options[0].text == "Montreal"
 
     assert dash_dcc.get_logs() == []
@@ -68,7 +72,7 @@ def test_dddo002_array_comma_value(dash_dcc):
 
     dash_dcc.start_server(app)
 
-    dash_dcc.wait_for_text_to_equal("#react-select-2--value-0", "San Francisco, CA\n ")
+    dash_dcc.wait_for_text_to_equal(".dash-dropdown-value", "San Francisco, CA")
 
     assert dash_dcc.get_logs() == []
 
@@ -118,11 +122,15 @@ def update_options(search_value):
 
     dash_dcc.start_server(app)
 
-    input_ = dash_dcc.find_element("#dropdown input")
+    dropdown = dash_dcc.find_element("#dropdown")
+    dropdown.click()
+    input_ = dash_dcc.find_element(".dash-dropdown-search")
 
     input_.send_keys("aa1")
-    input_.send_keys(Keys.ENTER)
+    input_.send_keys(Keys.ESCAPE)
 
+    dropdown.click()
+    input_ = dash_dcc.find_element(".dash-dropdown-search")
     input_.send_keys("b")
 
     time.sleep(1)

components/dash-core-components/tests/integration/dropdown/test_remove_option.py

@@ -1,7 +1,5 @@
 import json
-
 import pytest
-
 from dash import Dash, html, dcc, Output, Input, State, Patch
 from dash.exceptions import PreventUpdate
 
@@ -183,9 +181,11 @@ def on_value(value):
 
     dash_dcc.wait_for_text_to_equal("#count-output", "1")
 
-    select_input = dash_dcc.find_element("#drop input")
+    dropdown = dash_dcc.find_element("#drop")
+    dropdown.click()
+    select_input = dash_dcc.find_element("#drop .dash-dropdown-search")
     select_input.send_keys("a")
-    select_input.send_keys(Keys.ENTER)
+    dash_dcc.find_element("#drop .dash-dropdown-option").send_keys(Keys.SPACE)
 
     dash_dcc.wait_for_text_to_equal("#output", "Value=a")
     dash_dcc.wait_for_text_to_equal("#count-output", "2")

components/dash-core-components/tests/integration/dropdown/test_search_value.py

@@ -16,10 +16,15 @@ def update_output(search_value):
     dash_duo.start_server(app)
 
     # Get the inner input used for search value.
-    input_ = dash_duo.find_element("#dropdown input")
+    dropdown = dash_duo.find_element("#dropdown")
+    dropdown.click()
+    input_ = dash_duo.find_element(".dash-dropdown-search")
 
     dash_duo.wait_for_text_to_equal("#output", 'search_value="something"')
 
+    dash_duo.find_element(
+        ".dash-dropdown-search-container .dash-dropdown-clear"
+    ).click()
     input_.send_keys("x")
     dash_duo.wait_for_text_to_equal("#output", 'search_value="x"')
 

components/dash-core-components/tests/integration/dropdown/test_styles.py

@@ -40,10 +40,10 @@ def test_ddst001_cursor_should_be_pointer(dash_duo):
     dash_duo.start_server(app)
 
     dash_duo.find_element("#dropdown").click()
-    dash_duo.wait_for_element("#dropdown .Select-menu-outer")
+    dash_duo.wait_for_element("#dropdown .dash-dropdown-options")
 
     items = dash_duo.find_elements(
-        "#dropdown .Select-menu-outer .VirtualizedSelectOption"
+        "#dropdown .dash-dropdown-options .dash-dropdown-option"
     )
 
     assert items[0].value_of_css_property("cursor") == "pointer"

components/dash-core-components/tests/integration/dropdown/test_visibility.py

@@ -40,7 +40,7 @@ def test_ddvi001_fixed_table(dash_duo):
     dash_duo.start_server(app)
 
     dash_duo.find_element("#dropdown").click()
-    dash_duo.wait_for_element("#dropdown .Select-menu-outer")
+    dash_duo.wait_for_element("#dropdown .dash-dropdown-options")
 
     dash_duo.percy_snapshot("dcc.Dropdown dropdown overlaps table fixed rows/columns")
 
@@ -59,8 +59,7 @@ def test_ddvi002_maxHeight(dash_duo):
     dash_duo.start_server(app)
 
     dash_duo.find_element("#dropdown").click()
-    dash_duo.wait_for_element("#dropdown .Select-menu-outer")
-
+    dash_duo.wait_for_element("#dropdown .dash-dropdown-options")
     dash_duo.percy_snapshot("dcc.Dropdown dropdown menu maxHeight 800px")
 
     assert dash_duo.get_logs() == []