Fix dropdown

CHANGELOG.md

@@ -2,6 +2,12 @@
 All notable changes to `dash` will be documented in this file.
 This project adheres to [Semantic Versioning](https://semver.org/).
 
+## UNRELEASED
+
+## Fixed
+
+- [#2854](https://github.com/plotly/dash/pull/2854) Fix dcc.Dropdown resetting empty values to null and triggering callbacks. Fixes [#2850](https://github.com/plotly/dash/issues/2850)
+
 ## [2.17.0] - 2024-05-03
 
 ## Added

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

@@ -1,4 +1,4 @@
-import {isNil, pluck, without, pick} from 'ramda';
+import {isNil, pluck, without, pick, isEmpty} 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';
@@ -125,7 +125,8 @@ const Dropdown = props => {
             !search_value &&
             !isNil(sanitizedOptions) &&
             optionsCheck !== sanitizedOptions &&
-            !isNil(value)
+            !isNil(value) &&
+            !isEmpty(value)
         ) {
             const values = sanitizedOptions.map(option => option.value);
             if (multi && Array.isArray(value)) {

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

@@ -2,9 +2,10 @@
 
 import pytest
 
-from dash import Dash, html, dcc, Output, Input, State
+from dash import Dash, html, dcc, Output, Input, State, Patch
 from dash.exceptions import PreventUpdate
 
+from selenium.webdriver.common.keys import Keys
 
 sample_dropdown_options = [
     {"label": "New York City", "value": "NYC"},
@@ -147,3 +148,44 @@ def print_value(n_clicks, options, value):
     btn.click()
     dash_dcc.wait_for_text_to_equal("#value-output", '["NYC"]')
     dash_dcc.wait_for_text_to_equal("#options-output", '["MTL", "NYC"]')
+
+
+def test_ddro004_empty_string_not_updated(dash_dcc):
+    # The value should stay as empty string and not null.
+    app = Dash()
+    app.layout = html.Div(
+        [
+            dcc.Dropdown(["a", "b", "c"], value="", id="drop"),
+            html.Div(id="output"),
+            dcc.Store(data={"count": 0}, id="count"),
+            html.Div(id="count-output"),
+        ]
+    )
+
+    @app.callback(
+        Output("output", "children"),
+        Output("count", "data"),
+        Input("drop", "value"),
+    )
+    def on_value(value):
+        count = Patch()
+        count.count += 1
+        if value is None:
+            return "Value is none", count
+        return f"Value={value}", count
+
+    app.clientside_callback(
+        "data => data.count", Output("count-output", "children"), Input("count", "data")
+    )
+
+    dash_dcc.start_server(app)
+    dash_dcc.wait_for_text_to_equal("#output", "Value=")
+
+    dash_dcc.wait_for_text_to_equal("#count-output", "1")
+
+    select_input = dash_dcc.find_element("#drop input")
+    select_input.send_keys("a")
+    select_input.send_keys(Keys.ENTER)
+
+    dash_dcc.wait_for_text_to_equal("#output", "Value=a")
+    dash_dcc.wait_for_text_to_equal("#count-output", "2")