fix: date time picker (#3884)

carbon-design-system · Oct 2, 2024 · d16461c · d16461c
1 parent d0cb5f2
commit d16461c
Show file tree

Hide file tree

Showing 5 changed files with 37 additions and 38 deletions.
diff --git a/packages/react/src/components/Card/Card.test.jsx b/packages/react/src/components/Card/Card.test.jsx
@@ -702,13 +702,13 @@ describe('Card', () => {
     userEvent.click(screen.getAllByLabelText('Calendar')[0]);
     userEvent.click(screen.getByText('Custom Range'));
     userEvent.click(screen.getByLabelText('Absolute'));
-    expect(screen.getByText('lun')).toBeVisible();
-    expect(screen.getByText('mar')).toBeVisible();
-    expect(screen.getByText('mer')).toBeVisible();
-    expect(screen.getByText('jeu')).toBeVisible();
-    expect(screen.getByText('ven')).toBeVisible();
-    expect(screen.getByText('sam')).toBeVisible();
-    expect(screen.getByText('dim')).toBeVisible();
+    expect(screen.getByText('lun')).toBeInTheDocument();
+    expect(screen.getByText('mar')).toBeInTheDocument();
+    expect(screen.getByText('mer')).toBeInTheDocument();
+    expect(screen.getByText('jeu')).toBeInTheDocument();
+    expect(screen.getByText('ven')).toBeInTheDocument();
+    expect(screen.getByText('sam')).toBeInTheDocument();
+    expect(screen.getByText('dim')).toBeInTheDocument();
   });
 
   it('card extra actions(single/multiple)', async () => {

diff --git a/packages/react/src/components/DateTimePicker/DateTimePicker.jsx b/packages/react/src/components/DateTimePicker/DateTimePicker.jsx
@@ -296,6 +296,8 @@ const defaultProps = {
   style: {},
 };
 
+const dateTimePickerId = uuidv4();
+
 const DateTimePicker = ({
   testId,
   defaultValue,
@@ -315,7 +317,7 @@ const DateTimePicker = ({
   i18n,
   light,
   locale,
-  id = uuidv4(),
+  id = dateTimePickerId,
   style,
   ...others
 }) => {

diff --git a/packages/react/src/components/DateTimePicker/DateTimePickerV2WithTimeSpinner.jsx b/packages/react/src/components/DateTimePicker/DateTimePickerV2WithTimeSpinner.jsx
@@ -205,6 +205,8 @@ export const propTypes = {
   style: PropTypes.objectOf(PropTypes.oneOfType([PropTypes.string, PropTypes.number])),
 };
 
+const dateTimePickerId = uuidv4();
+
 export const defaultProps = {
   testId: 'date-time-picker',
   defaultValue: null,
@@ -322,7 +324,7 @@ const DateTimePicker = ({
   i18n,
   light,
   locale,
-  id = uuidv4(),
+  id = dateTimePickerId,
   hasIconOnly,
   menuOffset,
   datePickerType,

diff --git a/packages/react/src/components/DateTimePicker/DateTimePickerV2WithoutTimeSpinner.jsx b/packages/react/src/components/DateTimePicker/DateTimePickerV2WithoutTimeSpinner.jsx
@@ -268,6 +268,8 @@ const defaultProps = {
   style: {},
 };
 
+const dateTimePickerId = uuidv4();
+
 const DateTimePicker = ({
   testId,
   defaultValue,
@@ -287,7 +289,7 @@ const DateTimePicker = ({
   i18n,
   light,
   locale,
-  id = uuidv4(),
+  id = dateTimePickerId,
   hasIconOnly,
   menuOffset,
   renderInPortal,

diff --git a/packages/react/src/components/DateTimePicker/dateTimePickerUtils.js b/packages/react/src/components/DateTimePicker/dateTimePickerUtils.js
@@ -206,38 +206,31 @@ export const useDateTimePickerRef = ({ id, v2 = false }) => {
   }, []);
 
   useEffect(() => {
-    const timeout = setTimeout(() => {
-      if (datePickerElem) {
-        datePickerElem.cal.open();
-        // while waiting for https://github.com/carbon-design-system/carbon/issues/5713
-        // the only way to display the calendar inline is to re-parent its DOM to our component
-
-        if (v2) {
-          const dp = document.getElementById(`${id}-${iotPrefix}--date-time-picker__datepicker`);
-          dp.appendChild(datePickerElem.cal.calendarContainer);
-        } else {
-          const wrapper = document.getElementById(`${id}-${iotPrefix}--date-time-picker__wrapper`);
-
-          if (typeof wrapper !== 'undefined' && wrapper !== null) {
-            const dp = document
-              .getElementById(`${id}-${iotPrefix}--date-time-picker__wrapper`)
-              .getElementsByClassName(`${iotPrefix}--date-time-picker__datepicker`)[0];
-            dp.appendChild(datePickerElem.cal.calendarContainer);
-          }
-        }
+    if (datePickerElem) {
+      // while waiting for https://github.com/carbon-design-system/carbon/issues/5713
+      // the only way to display the calendar inline is to re-parent its DOM to our component
+
+      if (v2) {
+        const dp = document.getElementById(`${id}-${iotPrefix}--date-time-picker__datepicker`);
+        dp.appendChild(datePickerElem.cal.calendarContainer);
+      } else {
+        const wrapper = document.getElementById(`${id}-${iotPrefix}--date-time-picker__wrapper`);
 
-        // if we were focused on the Absolute radio button previously, restore focus to it.
-        /* istanbul ignore if */
-        if (previousActiveElement.current) {
-          previousActiveElement.current.focus();
-          previousActiveElement.current = null;
+        if (typeof wrapper !== 'undefined' && wrapper !== null) {
+          const dp = document
+            .getElementById(`${id}-${iotPrefix}--date-time-picker__wrapper`)
+            .getElementsByClassName(`${iotPrefix}--date-time-picker__datepicker`)[0];
+          dp.appendChild(datePickerElem.cal.calendarContainer);
         }
       }
-    }, 0);
 
-    return () => {
-      clearTimeout(timeout);
-    };
+      // if we were focused on the Absolute radio button previously, restore focus to it.
+      /* istanbul ignore if */
+      if (previousActiveElement.current) {
+        previousActiveElement.current.focus();
+        previousActiveElement.current = null;
+      }
+    }
   }, [datePickerElem, id, v2]);
 
   return [datePickerElem, handleDatePickerRef];