fix(app): Fix dropdown menu display issue for many items (#15420)

* fix(app): Fix dropdown menu display issue for many items
Opentrons · Jun 14, 2024 · f5d585a · f5d585a
1 parent f0e1917
commit f5d585a
Show file tree

Hide file tree

Showing 2 changed files with 38 additions and 18 deletions.
diff --git a/app/src/atoms/MenuList/DropdownMenu.stories.tsx b/app/src/atoms/MenuList/DropdownMenu.stories.tsx
@@ -3,14 +3,15 @@ import { DropdownMenu as DropdownMenuComponent } from './DropdownMenu'
 import type { Meta, StoryObj } from '@storybook/react'
 import type { DropdownOption } from './DropdownMenu'
 
-const mockOptions: DropdownOption[] = [
-  { name: 'option 1', value: '1' },
-  { name: 'option 2', value: '2' },
-  { name: 'option 3', value: '3' },
-  { name: 'option 4', value: '4' },
-  { name: 'option 5', value: '5' },
-  { name: 'option 6', value: '6' },
-]
+function createMockOptions(): DropdownOption[] {
+  const options: DropdownOption[] = []
+  for (let i = 1; i <= 100; i++) {
+    options.push({ name: `option ${i}`, value: `${i}` })
+  }
+  return options
+}
+
+const mockOptions: DropdownOption[] = createMockOptions()
 
 const meta: Meta<typeof DropdownMenuComponent> = {
   title: 'App/Atoms/DropdownMenu',

diff --git a/app/src/atoms/MenuList/DropdownMenu.tsx b/app/src/atoms/MenuList/DropdownMenu.tsx
@@ -16,10 +16,17 @@ import {
   useOnClickOutside,
   POSITION_RELATIVE,
   useHoverTooltip,
+  OVERFLOW_AUTO,
 } from '@opentrons/components'
 import { Tooltip } from '../Tooltip'
 import { MenuItem } from './MenuItem'
 
+/** this is the max height to display 10 items */
+const MAX_HEIGHT = 316
+
+/** this is for adjustment variable for the case that the space of the bottom and the space of the top are very close */
+const HEIGHT_ADJUSTMENT = 100
+
 export interface DropdownOption {
   name: string
   value: string
@@ -69,6 +76,12 @@ export function DropdownMenu(props: DropdownMenuProps): JSX.Element {
     'top' | 'bottom'
   >('bottom')
 
+  const dropDownMenuWrapperRef = useOnClickOutside<HTMLDivElement>({
+    onClickOutside: () => {
+      setShowDropdownMenu(false)
+    },
+  })
+
   React.useEffect(() => {
     const handlePositionCalculation = (): void => {
       const dropdownRect = dropDownMenuWrapperRef.current?.getBoundingClientRect()
@@ -88,10 +101,18 @@ export function DropdownMenu(props: DropdownMenuProps): JSX.Element {
           scrollOffset = parentRect.top
         }
 
-        const dropdownBottom =
-          dropdownRect.bottom + (filterOptions.length + 1) * 34 - scrollOffset
+        const downSpace =
+          filterOptions.length + 1 > 10
+            ? MAX_HEIGHT
+            : (filterOptions.length + 1) * 34
+        const dropdownBottom = dropdownRect.bottom + downSpace - scrollOffset
 
-        setDropdownPosition(dropdownBottom > availableHeight ? 'top' : 'bottom')
+        setDropdownPosition(
+          dropdownBottom > availableHeight &&
+            Math.abs(dropdownBottom - availableHeight) > HEIGHT_ADJUSTMENT
+            ? 'top'
+            : 'bottom'
+        )
       }
     }
 
@@ -103,16 +124,11 @@ export function DropdownMenu(props: DropdownMenuProps): JSX.Element {
       window.removeEventListener('resize', handlePositionCalculation)
       window.removeEventListener('scroll', handlePositionCalculation)
     }
-  }, [filterOptions.length, window.innerHeight])
+  }, [filterOptions.length, dropDownMenuWrapperRef])
 
   const toggleSetShowDropdownMenu = (): void => {
     setShowDropdownMenu(!showDropdownMenu)
   }
-  const dropDownMenuWrapperRef = useOnClickOutside<HTMLDivElement>({
-    onClickOutside: () => {
-      setShowDropdownMenu(false)
-    },
-  })
 
   const DROPDOWN_STYLE = css`
     flex-direction: ${DIRECTION_ROW};
@@ -204,7 +220,7 @@ export function DropdownMenu(props: DropdownMenuProps): JSX.Element {
         </Flex>
         {showDropdownMenu && (
           <Flex
-            zIndex={2}
+            zIndex={3}
             borderRadius={BORDERS.borderRadius8}
             boxShadow={BORDERS.tinyDropShadow}
             position={POSITION_ABSOLUTE}
@@ -213,9 +229,12 @@ export function DropdownMenu(props: DropdownMenuProps): JSX.Element {
             width={width}
             top={dropdownPosition === 'bottom' ? '2.5rem' : undefined}
             bottom={dropdownPosition === 'top' ? '2.5rem' : undefined}
+            overflowY={OVERFLOW_AUTO}
+            maxHeight="20rem" // Set the maximum display number to 10.
           >
             {filterOptions.map((option, index) => (
               <MenuItem
+                zIndex="3"
                 key={`${option.name}-${index}`}
                 onClick={() => {
                   onClick(option.value)