fix: LEAP-1258: prevent dropdown from opening upward when viewport sh…

…ort (#6426)
HumanSignal · Sep 25, 2024 · d3cb7a4 · d3cb7a4
1 parent 0ddb6cc
commit d3cb7a4
Show file tree

Hide file tree

Showing 8 changed files with 23 additions and 6 deletions.
diff --git a/web/libs/datamanager/src/components/Common/Dropdown/DropdownComponent.jsx b/web/libs/datamanager/src/components/Common/Dropdown/DropdownComponent.jsx
@@ -17,15 +17,21 @@ export const Dropdown = React.forwardRef(({ animated = true, visible = false, ..
   const { triggerRef } = React.useContext(DropdownContext) ?? {};
   const isInline = triggerRef === undefined;
 
-  const { children, align } = props;
+  const { children, align, openUpwardForShortViewport } = props;
   const [currentVisible, setVisible] = React.useState(visible);
   const [offset, setOffset] = React.useState({});
   const [visibility, setVisibility] = React.useState(visible ? "visible" : null);
 
   const calculatePosition = React.useCallback(() => {
     const dropdownEl = dropdown.current;
     const parent = triggerRef?.current ?? dropdownEl.parentNode;
-    const { left, top } = alignElements(parent, dropdownEl, align ?? "bottom-left");
+    const { left, top } = alignElements(
+      parent,
+      dropdownEl,
+      align ?? "bottom-left",
+      0,
+      openUpwardForShortViewport ?? true,
+    );
 
     setOffset({ left, top });
   }, [triggerRef]);

diff --git a/web/libs/datamanager/src/components/Common/FieldsButton.jsx b/web/libs/datamanager/src/components/Common/FieldsButton.jsx
@@ -73,6 +73,7 @@ export const FieldsButton = injector(
     selected,
     tooltip,
     tooltipTheme = "dark",
+    openUpwardForShortViewport = true,
   }) => {
     const content = [];
 
@@ -102,6 +103,7 @@ export const FieldsButton = injector(
           maxHeight: 280,
           overflow: "auto",
         }}
+        openUpwardForShortViewport={openUpwardForShortViewport}
       >
         {tooltip ? (
           <Elem name={"field-button"} style={{ zIndex: 1000 }}>

diff --git a/web/libs/datamanager/src/components/Common/FiltersPane.jsx b/web/libs/datamanager/src/components/Common/FiltersPane.jsx
@@ -58,7 +58,12 @@ export const FiltersPane = injector(
     }, [sidebarEnabled]);
 
     return (
-      <Dropdown.Trigger ref={dropdown} disabled={sidebarEnabled} content={<Filters />}>
+      <Dropdown.Trigger
+        ref={dropdown}
+        disabled={sidebarEnabled}
+        content={<Filters />}
+        openUpwardForShortViewport={false}
+      >
         <FiltersButton {...rest} size={size} />
       </Dropdown.Trigger>
     );

diff --git a/web/libs/datamanager/src/components/Common/Tabs/Tabs.jsx b/web/libs/datamanager/src/components/Common/Tabs/Tabs.jsx
@@ -163,6 +163,7 @@ export const TabsItem = ({
         {showMenu && (
           <Dropdown.Trigger
             align="bottom-left"
+            openUpwardForShortViewport={false}
             content={
               <TabsMenu
                 editable={tabIsEditable}

diff --git a/web/libs/datamanager/src/components/DataManager/Toolbar/ActionsButton.jsx b/web/libs/datamanager/src/components/DataManager/Toolbar/ActionsButton.jsx
@@ -154,6 +154,7 @@ export const ActionsButton = injector(
             <Menu size="compact">{actionButtons}</Menu>
           )
         }
+        openUpwardForShortViewport={false}
         disabled={!hasSelected}
         onToggle={(visible) => isFFLOPSE3 && setIsOpen(visible)}
       >

diff --git a/web/libs/datamanager/src/components/DataManager/Toolbar/OrderButton.jsx b/web/libs/datamanager/src/components/DataManager/Toolbar/OrderButton.jsx
@@ -43,6 +43,7 @@ export const OrderButton = injector(({ size, ordering, view, ...rest }) => {
               </div>
             </Space>
           )}
+          openUpwardForShortViewport={false}
         />
 
         <Button

diff --git a/web/libs/datamanager/src/components/DataManager/Toolbar/instruments.jsx b/web/libs/datamanager/src/components/DataManager/Toolbar/instruments.jsx
@@ -90,6 +90,7 @@ export const instruments = {
         title={"Columns"}
         size={size}
         style={style}
+        openUpwardForShortViewport={false}
       />
     );
   },

diff --git a/web/libs/datamanager/src/utils/dom.js b/web/libs/datamanager/src/utils/dom.js
@@ -27,7 +27,7 @@ const positioner = (source, target) => {
   };
 };
 
-export const alignElements = (elem, target, align, padding = 0) => {
+export const alignElements = (elem, target, align, padding = 0, openUpwardForShortViewport = true) => {
   let offsetLeft = 0;
   let offsetTop = 0;
 
@@ -67,10 +67,10 @@ export const alignElements = (elem, target, align, padding = 0) => {
       break;
   }
 
-  if (offsetTop < window.scrollX) {
+  if (offsetTop < window.scrollY) {
     offsetTop = pos.bottom + padding;
     resultAlign[0] = "bottom";
-  } else if (offsetTop + pos.target.height > window.scrollX + window.innerHeight) {
+  } else if (openUpwardForShortViewport && offsetTop + pos.target.height > window.scrollY + window.innerHeight) {
     offsetTop = pos.top - padding;
     resultAlign[0] = "top";
   }
-Original file line number
+Diff line change
@@ Expand Up @@
                   </div>
                 </Space>
               )}
+              openUpwardForShortViewport={false}
             />
             <Button
@@ Expand Down @@