Merge pull request #3727 from carbon-design-system/fix-3620

fix(datetimepickerv2): flyout menu change position to left-start when set --wrapper-width to 100%
carbon-design-system · Mar 9, 2023 · bb394af · bb394af
2 parents 0291e75 + a24452c
commit bb394af
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 4 deletions.
diff --git a/packages/react/src/components/DateTimePicker/DateTimePickerV2.test.jsx b/packages/react/src/components/DateTimePicker/DateTimePickerV2.test.jsx
@@ -2078,7 +2078,7 @@ describe('DateTimePickerV2', () => {
     Element.prototype.getBoundingClientRect = originalGetBoundingClientRect;
   });
 
-  it('when flyout offscreen top right render direction to LeftStart', () => {
+  it('when flyout offscreen top right render direction to bottomEnd', () => {
     const originalGetBoundingClientRect = Element.prototype.getBoundingClientRect;
     const mockGetBoundingClientRect = jest.fn(
       generateBoundingClientRect({
@@ -2123,7 +2123,7 @@ describe('DateTimePickerV2', () => {
     const menu = screen.getByTestId(`${testId}-datepicker-flyout`);
 
     expect(
-      menu.classList.contains(`${iotPrefix}--flyout-menu--body__${FlyoutMenuDirection.LeftStart}`)
+      menu.classList.contains(`${iotPrefix}--flyout-menu--body__${FlyoutMenuDirection.BottomEnd}`)
     ).toBe(true);
     Element.prototype.getBoundingClientRect = originalGetBoundingClientRect;
   });
@@ -2323,7 +2323,7 @@ describe('DateTimePickerV2', () => {
     const menu = screen.getByTestId(`${testId}-datepicker-flyout`);
 
     expect(
-      menu.classList.contains(`${iotPrefix}--flyout-menu--body__${FlyoutMenuDirection.LeftEnd}`)
+      menu.classList.contains(`${iotPrefix}--flyout-menu--body__${FlyoutMenuDirection.BottomEnd}`)
     ).toBe(true);
     Element.prototype.getBoundingClientRect = originalGetBoundingClientRect;
   });

diff --git a/packages/react/src/hooks/usePopoverPositioning.jsx b/packages/react/src/hooks/usePopoverPositioning.jsx
@@ -252,6 +252,9 @@ export const usePopoverPositioning = ({
           break;
         case 'right':
         case 'top-right':
+          if (direction === 'bottom-end') {
+            break;
+          }
           if (flyoutAlignment) {
             // fixes an edge case where if the flyout is right-end,
             // and causes an overflow to the top-right, then we need to
@@ -340,7 +343,7 @@ export const usePopoverPositioning = ({
         left: newOffset.left + adjustedOffset.left,
       };
     },
-    [adjustedDirection, flyoutAlignment, getAdjustedOffset, getOffset, isOverflowMenu]
+    [adjustedDirection, direction, flyoutAlignment, getAdjustedOffset, getOffset, isOverflowMenu]
   );
 
   /**