[Dropdown][Tooltip]: Fixed a bug where the body overflowed if there w…

…as no space for the default or opposite placement. Now it tries other placements, e.g., if there’s no space at the top or bottom, it will place the body on the right if there’s enough space.
epam · Dec 12, 2024 · 618f3fc · 618f3fc
1 parent d400a96
commit 618f3fc
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 4 deletions.
diff --git a/changelog.md b/changelog.md
@@ -8,6 +8,8 @@
 * [ErrorPage]: embed typography styles for error page texts
 
 **What's Fixed**
+* [Dropdown][Tooltip]: Fixed a bug where the body overflowed if there was no space for the default or opposite placement. 
+  Now it tries other placements, e.g., if there’s no space at the top or bottom, it will place the body on the right if there’s enough space.
 * [PickerInput]: fixed unnecessary api calls on body open with `minCharsToSearch` prop and search in body
 * [RTE]: fixed image caption not being visible when RTE initially in readonly mode
 * [DatePicker]: fixed body close if date picker input scrolled out from view

diff --git a/uui-components/src/overlays/Dropdown.tsx b/uui-components/src/overlays/Dropdown.tsx
@@ -219,14 +219,24 @@ export class Dropdown extends React.Component<DropdownProps, DropdownState> {
         }
     };
 
-    private getPlacement = (placement: Placement): Placement => {
+    private getPlacement = (placement: Placement = 'bottom-start'): Placement => {
         if (window.document?.dir === 'rtl') {
-            if (!placement) return 'bottom-end';
             return placement.replace('start', 'end') as Placement;
         }
         return placement;
     };
 
+    private getOppositePlacement = (placement: Placement): Placement => {
+        const placementDirection = placement.split('-')[0];
+        switch (placementDirection) {
+            case 'bottom': return placement.replace('bottom', 'top') as Placement;
+            case 'top': return placement.replace('top', 'bottom') as Placement;
+            case 'left': return placement.replace('left', 'right') as Placement;
+            case 'right': return placement.replace('right', 'left') as Placement;
+            default: return placement;
+        }
+    };
+
     private renderTarget(targetProps: ReferenceChildrenProps) {
         const innerRef = (node: HTMLElement | null) => {
             if (!node) {
@@ -319,10 +329,17 @@ export class Dropdown extends React.Component<DropdownProps, DropdownState> {
                     rootBoundary: 'viewport',
                     boundary: this.props.boundaryElement,
                 },
-            }, {
+            },
+            {
                 name: 'hide',
                 enabled: true,
             },
+            {
+                name: 'flip',
+                options: {
+                    fallbackPlacements: [this.getOppositePlacement(this.getPlacement(this.props.placement)), 'auto'],
+                },
+            },
         ];
 
         if (shouldShowBody) {
@@ -334,7 +351,7 @@ export class Dropdown extends React.Component<DropdownProps, DropdownState> {
                 <Reference>{(targetProps) => this.renderTarget(targetProps)}</Reference>
                 {shouldShowBody && (
                     <Portal target={ this.props.portalTarget }>
-                        <Popper placement={ this.getPlacement(this.props.placement) || 'bottom-start' } strategy="fixed" modifiers={ [...defaultModifiers, ...(this.props.modifiers || [])] }>
+                        <Popper placement={ this.getPlacement(this.props.placement) } strategy="fixed" modifiers={ [...defaultModifiers, ...(this.props.modifiers || [])] }>
                             {this.renderDropdownBody}
                         </Popper>
                     </Portal>