Merge pull request #3743 from carbon-design-system/dtp-mask-check-fix

fix(datetimepicker): add check for mask value
carbon-design-system · Mar 6, 2023 · dd05de0 · dd05de0
2 parents 369f44b + d86cb01
commit dd05de0
Show file tree

Hide file tree

Showing 4 changed files with 18 additions and 2 deletions.
diff --git a/packages/react/src/components/DateTimePicker/DateTimePickerV2.test.jsx b/packages/react/src/components/DateTimePicker/DateTimePickerV2.test.jsx
@@ -2817,4 +2817,16 @@ describe('DateTimePickerV2', () => {
       expect(onApply).toHaveBeenCalledTimes(1);
     });
   });
+
+  it('should render without a time picker and a mask that does not include time', () => {
+    render(
+      <DateTimePicker
+        {...dateTimePickerProps}
+        i18n={i18n}
+        dateTimeMask="MM/DD/YYYY"
+        hasTimeInput={false}
+      />
+    );
+    expect(screen.getByText(PRESET_VALUES[0].label)).toBeVisible();
+  });
 });
diff --git a/packages/react/src/components/DateTimePicker/DateTimePickerV2WithTimeSpinner.jsx b/packages/react/src/components/DateTimePicker/DateTimePickerV2WithTimeSpinner.jsx
@@ -341,7 +341,7 @@ const DateTimePicker = ({
   const is24hours = useMemo(() => {
     const [, time] = dateTimeMask.split(' ');
     const hoursMask = time?.split(':')[0];
-    return hoursMask.includes('H');
+    return hoursMask ? hoursMask.includes('H') : false;
   }, [dateTimeMask]);
   const isSingleSelect = useMemo(() => datePickerType === 'single', [datePickerType]);
 

diff --git a/packages/react/src/components/DateTimePicker/dateTimePickerUtils.js b/packages/react/src/components/DateTimePicker/dateTimePickerUtils.js
@@ -16,7 +16,7 @@ const { iotPrefix } = settings;
 const is24hours = (dateTimeMask) => {
   const [, time] = dateTimeMask.split(' ');
   const hoursMask = time?.split(':')[0];
-  return hoursMask.includes('H');
+  return hoursMask ? hoursMask.includes('H') : false;
 };
 
 /** convert time from 12 hours to 24 hours, if time12hour is 24 hours format, return immediately

diff --git a/packages/react/src/components/Header/_header.scss b/packages/react/src/components/Header/_header.scss
@@ -49,6 +49,10 @@ $hoverBgColor: #2c2c2c;
   &__menu-title[role='menuitem'][aria-expanded='true'] + &__menu {
     left: auto;
     right: 0;
+    [dir='rtl'] & {
+      left: 0;
+      right: auto;
+    }
   }
 
   &__menu {