From 79c59acd0d2ec4a0c9e9cd8aed3a7bde629d57e1 Mon Sep 17 00:00:00 2001
From: jbpenrath <jb.penrath@gmail.com>
Date: Mon, 17 Mar 2025 15:47:09 +0100
Subject: [PATCH] =?UTF-8?q?=F0=9F=90=9B(react)=20fix=20DateRangePicker=20i?=
 =?UTF-8?q?ssue?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

We encountered a bug with the date range picker due to an internal
logic of `@react-aria/calendar`. This bug silently came back recently but
our test suite does not trigger that but since the update of
`@testing-library/user-event` a test starts to fail and highlight this issue so
we fix again this bug.

https://github.com/adobe/react-spectrum/commit/12f2f4e
---
 .changeset/fair-lizards-tie.md                   |  5 +++++
 .../src/components/Forms/DatePicker/Calendar.tsx | 16 ++++++----------
 2 files changed, 11 insertions(+), 10 deletions(-)
 create mode 100644 .changeset/fair-lizards-tie.md

diff --git a/.changeset/fair-lizards-tie.md b/.changeset/fair-lizards-tie.md
new file mode 100644
index 0000000..0bc1eca
--- /dev/null
+++ b/.changeset/fair-lizards-tie.md
@@ -0,0 +1,5 @@
+---
+"@openfun/cunningham-react": patch
+---
+
+Fix a bug DateRangePicker that could close popover abruptly
diff --git a/packages/react/src/components/Forms/DatePicker/Calendar.tsx b/packages/react/src/components/Forms/DatePicker/Calendar.tsx
index f5203c1..0752bae 100644
--- a/packages/react/src/components/Forms/DatePicker/Calendar.tsx
+++ b/packages/react/src/components/Forms/DatePicker/Calendar.tsx
@@ -233,24 +233,20 @@ const CalendarAux = ({
   return (
     <div className="c__calendar">
       <div
-        ref={ref}
-        {...calendarProps}
         // We need to remove the id from the calendar when the dropdowns are open to avoid having the following bug:
         // 1 - Open the calendar
         // 2 - Select a start date
         // 3 - Click on the dropdown to select another year
         // 4 - BUG: The calendar closes abruptly.
         //
-        // This way caused by this internal call from Spectrum: https://github.com/adobe/react-spectrum/blob/cdb2fe21213d9e8b03d782d82bda07742ab3afbd/packages/%40react-aria/calendar/src/useRangeCalendar.ts#L59
+        // This way caused by this internal call from Spectrum: https://github.com/adobe/react-spectrum/blob/74cac946a8e6c62cd111d062c58626f774372b91/packages/%40react-aria/calendar/src/useRangeCalendar.ts#L52-L60
         //
         // So instead we decided to remove the id of the calendar when the dropdowns are open and add it back when
-        // the dropdowns are closed in order to make this condition fail: https://github.com/adobe/react-spectrum/blob/cdb2fe21213d9e8b03d782d82bda07742ab3afbd/packages/%40react-aria/calendar/src/useRangeCalendar.ts#L55
-        // This way the `body` variable will never be found.
-        id={
-          !downshiftMonth.isOpen && !downshiftYear.isOpen
-            ? calendarProps.id
-            : ""
-        }
+        // the dropdowns are closed in order to make this condition fail: https://github.com/adobe/react-spectrum/blob/74cac946a8e6c62cd111d062c58626f774372b91/packages/%40react-aria/calendar/src/useRangeCalendar.ts#L55
+        // This way the referenced element will never be found.
+        ref={!downshiftMonth.isOpen && !downshiftYear.isOpen ? ref : null}
+        {...calendarProps}
+        id={calendarProps.id}
         className={classNames("c__calendar__wrapper", {
           "c__calendar__wrapper--opened":
             !downshiftMonth.isOpen && !downshiftYear.isOpen,