Fix clearable button does not call setProps

Author: KoolADE85

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

@@ -135,6 +135,12 @@ const DatePickerRange = ({
                 start_date: dateAsStr(internalStartDate),
                 end_date: dateAsStr(internalEndDate),
             });
+        } else if (!internalStartDate && !internalEndDate) {
+            // Both dates cleared - send undefined for both
+            setProps({
+                start_date: dateAsStr(internalStartDate),
+                end_date: dateAsStr(internalEndDate),
+            });
         } else if (updatemode === 'singledate' && internalStartDate) {
             // Only start changed - send just that one
             setProps({start_date: dateAsStr(internalStartDate)});

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

@@ -13,9 +13,26 @@ def test_cdpr001_date_clearable_true_works(dash_dcc):
         [
             dcc.DatePickerRange(id="dpr", clearable=True),
             dcc.DatePickerSingle(id="dps", clearable=True),
+            html.Div(id="dpr-output"),
+            html.Div(id="dps-output"),
         ]
     )
 
+    @app.callback(
+        Output("dpr-output", "children"),
+        Input("dpr", "start_date"),
+        Input("dpr", "end_date"),
+    )
+    def display_range_dates(start_date, end_date):
+        return f"Range: {start_date} - {end_date}"
+
+    @app.callback(
+        Output("dps-output", "children"),
+        Input("dps", "date"),
+    )
+    def display_single_date(date):
+        return f"Single: {date}"
+
     dash_dcc.start_server(app)
 
     # DPR
@@ -26,21 +43,34 @@ def test_cdpr001_date_clearable_true_works(dash_dcc):
         "1" in start_date and "28" in end_date
     ), "both start date and end date should match the selected day"
 
+    # Verify callback received the dates
+    dash_dcc.wait_for_text_to_equal("#dpr-output", f"Range: {start_date} - {end_date}")
+
     close_btn.click()
     sleep(0.25)
     start_date, end_date = dash_dcc.get_date_range("dpr")
     assert not start_date and not end_date, "both start and end dates should be cleared"
 
+    # Verify callback received the cleared dates (None)
+    dash_dcc.wait_for_text_to_equal("#dpr-output", "Range: None - None")
+
     # DPS
     selected = dash_dcc.select_date_single("dps", day="1")
 
     assert selected, "single date should get a value"
+
+    # Verify callback received the date
+    dash_dcc.wait_for_text_to_equal("#dps-output", f"Single: {selected}")
+
     close_btn = dash_dcc.wait_for_element("#dps-wrapper .dash-datepicker-clear")
     close_btn.click()
     sleep(0.25)
     (single_date,) = dash_dcc.get_date_range("dps")
     assert not single_date, "date should be cleared"
 
+    # Verify callback received the cleared date (None)
+    dash_dcc.wait_for_text_to_equal("#dps-output", "Single: None")
+
     assert dash_dcc.get_logs() == []