Merge pull request #3811 from plotly/bugfix/3425-datepicker-bothdates

Bugfix: datepicker `updatemode="bothdates"` not always respected

Author: KoolADE85

CHANGELOG.md

@@ -12,6 +12,7 @@ This project adheres to [Semantic Versioning](https://semver.org/).
 - [#3819](https://github.com/plotly/dash/pull/3819) Fix `RuntimeError: No active request in context` when a non-Dash path falls through to the FastAPI catch-all route. Fixes [#3812](https://github.com/plotly/dash/issues/3812).
 - [#3838](https://github.com/plotly/dash/pull/3838) Replace `mcp` dependency with inline types.
 - [#3824](https://github.com/plotly/dash/pull/3824) Fix `dash.testing` `ThreadedRunner.stop()` hanging at teardown for Quart apps. Fixes [#3823](https://github.com/plotly/dash/issues/3823).
+- [#3425](https://github.com/plotly/dash/issues/3425) dcc.DatePicker: Fix `updatemode="bothdates"` not always respected
 
 ## Changed
 - Drop support for Python 3.8 (end-of-life since October 2024). The minimum supported version is now Python 3.9.

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

@@ -167,8 +167,14 @@ const DatePickerRange = ({
                 start_date: dateAsStr(internalStartDate),
                 end_date: dateAsStr(internalEndDate),
             });
-        } else if (endChanged && !internalEndDate) {
-            // End date was cleared (user started a new range).
+        } else if (
+            updatemode === 'singledate' &&
+            endChanged &&
+            !internalEndDate
+        ) {
+            // End date was cleared (user started a new range). Under
+            // 'bothdates' we wait for a complete range before updating props,
+            // so this partial update is only sent in 'singledate' mode.
             setProps({
                 start_date: dateAsStr(internalStartDate) ?? null,
                 end_date: null,
@@ -358,7 +364,7 @@ const DatePickerRange = ({
 
     return (
         <div className="dash-datepicker" ref={containerRef}>
-            <ResizeDetector onResize={handleResize} targets={[containerRef]}/>
+            <ResizeDetector onResize={handleResize} targets={[containerRef]} />
             <Popover.Root
                 open={!disabled && isCalendarOpen}
                 onOpenChange={disabled ? undefined : setIsCalendarOpen}
@@ -388,9 +394,7 @@ const DatePickerRange = ({
                             id={start_date_id || accessibleId}
                             inputClassName="dash-datepicker-input dash-datepicker-start-date"
                             value={startInputValue}
-                            onChange={e =>
-                                setStartInputValue(e.target?.value)
-                            }
+                            onChange={e => setStartInputValue(e.target?.value)}
                             onKeyDown={handleStartInputKeyDown}
                             onFocus={() => {
                                 if (isCalendarOpen) {
@@ -412,9 +416,7 @@ const DatePickerRange = ({
                             id={end_date_id || accessibleId + '-end-date'}
                             inputClassName="dash-datepicker-input dash-datepicker-end-date"
                             value={endInputValue}
-                            onChange={e =>
-                                setEndInputValue(e.target?.value)
-                            }
+                            onChange={e => setEndInputValue(e.target?.value)}
                             onKeyDown={handleEndInputKeyDown}
                             onFocus={() => {
                                 if (isCalendarOpen) {

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

@@ -534,3 +534,43 @@ def display_dates(start_date, end_date):
     ), "End input should display 2021-06-30"
 
     assert dash_dcc.get_logs() == []
+
+
+def test_dtpr031_bothdates_no_partial_update_on_new_start(dash_dcc):
+    """Bug #3425: with updatemode='bothdates', picking a new start date (which
+    clears the end date) must not fire a partial update for the incomplete range."""
+    app = Dash(__name__)
+    app.layout = html.Div(
+        [
+            dcc.DatePickerRange(
+                id="dpr",
+                min_date_allowed=datetime(2021, 1, 1),
+                max_date_allowed=datetime(2021, 1, 31),
+                initial_visible_month=datetime(2021, 1, 1),
+                minimum_nights=0,
+                updatemode="bothdates",
+                display_format="MM/DD/YYYY",
+            ),
+            html.Div(id="output"),
+        ]
+    )
+
+    @app.callback(
+        Output("output", "children"),
+        Input("dpr", "start_date"),
+        Input("dpr", "end_date"),
+        prevent_initial_call=True,
+    )
+    def display_dates(start_date, end_date):
+        return f"Start: {start_date}, End: {end_date}"
+
+    dash_dcc.start_server(app)
+
+    dash_dcc.select_date_range("dpr", day_range=(2, 11))
+    dash_dcc.wait_for_text_to_equal("#output", "Start: 2021-01-02, End: 2021-01-11")
+
+    dash_dcc.select_date_range("dpr", day_range=(4,))
+    time.sleep(0.5)
+    assert dash_dcc.find_element("#output").text == "Start: 2021-01-02, End: 2021-01-11"
+
+    assert dash_dcc.get_logs() == []

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

@@ -138,7 +138,7 @@ def test_dppt006_fullscreen_portal_close_button_keyboard(dash_dcc):
     assert popover.is_displayed()
 
     action = ActionChains(dash_dcc.driver)
-    action.move_to_element_with_offset(popover, 10, 10).click().perform()
+    action.move_by_offset(10, 10).click().perform()
     sleep(0.2)
 
     popover = dash_dcc.find_element(".dash-datepicker-content")