Fix end_date persistence bug

Author: KoolADE85

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

@@ -124,18 +124,27 @@ const DatePickerRange = ({
     }, [internalEndDate, display_format]);
 
     useEffect(() => {
-        // Controls whether or not to call `setProps`
+        // Controls when setProps is called. Basically, whenever internal state
+        // diverges from props (i.e., user interaction)
         const startChanged = !isSameDay(start_date, internalStartDate);
         const endChanged = !isSameDay(end_date, internalEndDate);
 
-        const newDates: Partial<DatePickerRangeProps> = {
-            ...(startChanged && {start_date: dateAsStr(internalStartDate)}),
-            ...(endChanged && {end_date: dateAsStr(internalEndDate)}),
-        };
+        if (!startChanged && !endChanged) {
+            return;
+        }
 
-        const numPropsRequiredForUpdate = updatemode === 'bothdates' ? 2 : 1;
-        if (Object.keys(newDates).length >= numPropsRequiredForUpdate) {
-            setProps(newDates);
+        if (internalStartDate && internalEndDate) {
+            // Both dates are set - send 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)});
+        } else if (updatemode === 'singledate' && internalEndDate) {
+            // Only end changed - send just that one
+            setProps({end_date: dateAsStr(internalEndDate)});
         }
     }, [start_date, internalStartDate, end_date, internalEndDate, updatemode]);
 

components/dash-core-components/tests/dash_core_components_page.py

@@ -67,8 +67,9 @@ def select_date_range(self, compid, day_range, start_first=True):
             )
             return
 
-        prefix = "Start" if start_first else "End"
-        date = self.find_element(f'#{compid}[aria-label="{prefix} Date"]')
+        if not start_first:
+            compid += "-end-date"
+        date = self.find_element(f"#{compid}")
         date.click()
         for day in day_range:
             self._wait_until_day_is_clickable()

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

@@ -149,7 +149,7 @@ def update_output(start_date, end_date):
     send_keys(dash_dcc.driver, Keys.SPACE)
 
     # Verify new start date was selected (only start_date, no end_date)
-    dash_dcc.wait_for_text_to_equal("#output-dates", "Start: 2021-01-12")
+    dash_dcc.wait_for_text_to_equal("#output-dates", "2021-01-12 to 2021-01-20")
 
     # Navigate to new end date: Arrow Down + Arrow Right (Jan 12 -> 19 -> 20)
     send_keys(dash_dcc.driver, Keys.ARROW_DOWN)

components/dash-core-components/tests/integration/misc/test_persistence.py

@@ -25,8 +25,6 @@ def test_msps001_basic_persistence(dash_dcc):
                 id="datepickerrange",
                 start_date="2017-08-21",
                 end_date="2024-04-08",
-                start_date_id="start_date",
-                end_date_id="end_date",
                 initial_visible_month="2019-05-01",
                 persistence=True,
             ),
@@ -127,7 +125,7 @@ def make_output(*args):
     dash_dcc.select_date_range("datepickerrange", day_range=(4,))
     dash_dcc.select_date_range("datepickerrange", day_range=(14,), start_first=False)
 
-    dash_dcc.find_element("#datepickersingle input").click()
+    dash_dcc.find_element("#datepickersingle").click()
     dash_dcc.select_date_single("datepickersingle", day="20")
 
     dash_dcc.find_element("#dropdownsingle").click()