Fix bug that prevented dates from being updated externally

Author: KoolADE85

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

@@ -143,7 +143,7 @@ const DatePickerRange = ({
             // Only end changed - send just that one
             setProps({end_date: dateAsStr(internalEndDate)});
         }
-    }, [start_date, internalStartDate, end_date, internalEndDate, updatemode]);
+    }, [internalStartDate, internalEndDate, updatemode]);
 
     const sendStartInputAsDate = useCallback(
         (focusCalendar = false) => {

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

@@ -76,7 +76,7 @@ const DatePickerSingle = ({
         if (dateChanged) {
             setProps({date: dateAsStr(internalDate)});
         }
-    }, [date, internalDate, setProps]);
+    }, [internalDate]);
 
     const parseUserInput = useCallback(
         (focusCalendar = false) => {

components/dash-core-components/tests/integration/calendar/test_date_picker_range.py

@@ -1,6 +1,7 @@
 from datetime import datetime
+import time
 
-from dash import Dash, html, dcc
+from dash import Dash, Input, Output, html, dcc
 from selenium.common.exceptions import (
     ElementClickInterceptedException,
     TimeoutException,
@@ -374,3 +375,70 @@ def test_dtpr008_input_click_opens_but_keeps_focus(dash_dcc):
     ), f"Calendar should show 2026, but shows: {year_input.get_attribute('value')}"
 
     assert dash_dcc.get_logs() == []
+
+
+def test_dtpr030_external_date_range_update(dash_dcc):
+    """Test that DatePickerRange accepts external date updates via callback without resetting."""
+    app = Dash(__name__)
+    app.layout = html.Div(
+        [
+            html.Button("Update dates", id="update-btn"),
+            dcc.DatePickerRange(
+                id="dpr",
+                start_date="2024-01-01",
+                end_date="2024-12-31",
+            ),
+            html.Div(id="output"),
+        ]
+    )
+
+    @app.callback(
+        Output("dpr", "start_date"),
+        Output("dpr", "end_date"),
+        Input("update-btn", "n_clicks"),
+        prevent_initial_call=True,
+    )
+    def update_dates(n_clicks):
+        return "2021-06-01", "2021-06-30"
+
+    @app.callback(
+        Output("output", "children"),
+        Input("dpr", "start_date"),
+        Input("dpr", "end_date"),
+    )
+    def display_dates(start_date, end_date):
+        return f"Start: {start_date}, End: {end_date}"
+
+    dash_dcc.start_server(app)
+
+    # Verify initial dates
+    dash_dcc.wait_for_text_to_equal("#output", "Start: 2024-01-01, End: 2024-12-31")
+    start_input = dash_dcc.find_element(".dash-datepicker-start-date")
+    end_input = dash_dcc.find_element(".dash-datepicker-end-date")
+    assert start_input.get_attribute("value") == "2024-01-01"
+    assert end_input.get_attribute("value") == "2024-12-31"
+
+    # Click button to trigger external update
+    btn = dash_dcc.find_element("#update-btn")
+    btn.click()
+
+    # Verify dates were updated and stay updated (don't reset back)
+    dash_dcc.wait_for_text_to_equal(
+        "#output", "Start: 2021-06-01, End: 2021-06-30", timeout=4
+    )
+
+    # Give it a moment to potentially incorrectly reset
+    time.sleep(0.5)
+
+    # Verify they're still the new dates
+    assert (
+        dash_dcc.find_element("#output").text == "Start: 2021-06-01, End: 2021-06-30"
+    ), "Dates should remain updated after external update"
+    assert (
+        start_input.get_attribute("value") == "2021-06-01"
+    ), "Start input should display 2021-06-01"
+    assert (
+        end_input.get_attribute("value") == "2021-06-30"
+    ), "End input should display 2021-06-30"
+
+    assert dash_dcc.get_logs() == []

components/dash-core-components/tests/integration/calendar/test_date_picker_single.py

@@ -619,3 +619,60 @@ def test_dtps026_input_click_opens_but_keeps_focus(dash_dcc):
     ), f"Calendar should show 2026, but shows: {year_input.get_attribute('value')}"
 
     assert dash_dcc.get_logs() == []
+
+
+def test_dtps030_external_date_update(dash_dcc):
+    """Test that DatePickerSingle accepts external date updates via callback without resetting."""
+    app = Dash(__name__)
+    app.layout = html.Div(
+        [
+            html.Button("Update to 2021-06-23", id="update-btn"),
+            dcc.DatePickerSingle(
+                id="dps",
+                date="2024-11-25",
+            ),
+            html.Div(id="output"),
+        ]
+    )
+
+    @app.callback(
+        Output("dps", "date"),
+        Input("update-btn", "n_clicks"),
+        prevent_initial_call=True,
+    )
+    def update_date(n_clicks):
+        return "2021-06-23"
+
+    @app.callback(
+        Output("output", "children"),
+        Input("dps", "date"),
+    )
+    def display_date(date):
+        return f"Date: {date}"
+
+    dash_dcc.start_server(app)
+
+    # Verify initial date
+    dash_dcc.wait_for_text_to_equal("#output", "Date: 2024-11-25")
+    input_element = dash_dcc.find_element(".dash-datepicker-input")
+    assert input_element.get_attribute("value") == "2024-11-25"
+
+    # Click button to trigger external update
+    btn = dash_dcc.find_element("#update-btn")
+    btn.click()
+
+    # Verify date was updated and stays updated (doesn't reset back)
+    dash_dcc.wait_for_text_to_equal("#output", "Date: 2021-06-23", timeout=4)
+
+    # Give it a moment to potentially incorrectly reset
+    time.sleep(0.5)
+
+    # Verify it's still the new date
+    assert (
+        dash_dcc.find_element("#output").text == "Date: 2021-06-23"
+    ), "Date should remain 2021-06-23 after external update"
+    assert (
+        input_element.get_attribute("value") == "2021-06-23"
+    ), "Input should display 2021-06-23"
+
+    assert dash_dcc.get_logs() == []