fix(protocol-designer): fix dropdownmenu expands upwards (#16713)

* fix(protocol-designer): fix dropdownmenu expands upwards (#16713)
Opentrons · Nov 7, 2024 · 825c23c · 825c23c
1 parent 7e59b53
commit 825c23c
Show file tree

Hide file tree

Showing 4 changed files with 12 additions and 1 deletion.
diff --git a/components/src/atoms/ListItem/ListItemChildren/ListItemCustomize.tsx b/components/src/atoms/ListItem/ListItemChildren/ListItemCustomize.tsx
@@ -18,6 +18,8 @@ interface ListItemCustomizeProps {
   label?: string
   dropdown?: DropdownMenuProps
   tag?: TagProps
+  /** temporary prop for dropdown menu  */
+  forceDirection?: boolean
 }
 
 export function ListItemCustomize(props: ListItemCustomizeProps): JSX.Element {
@@ -29,6 +31,7 @@ export function ListItemCustomize(props: ListItemCustomizeProps): JSX.Element {
     linkText,
     dropdown,
     tag,
+    forceDirection = false,
   } = props
   return (
     <Flex width="100%" alignItems={ALIGN_CENTER} padding={SPACING.spacing12}>
@@ -49,7 +52,9 @@ export function ListItemCustomize(props: ListItemCustomizeProps): JSX.Element {
             {label}
           </StyledText>
         ) : null}
-        {dropdown != null ? <DropdownMenu {...dropdown} /> : null}
+        {dropdown != null ? (
+          <DropdownMenu {...dropdown} forceDirection={forceDirection} />
+        ) : null}
         {tag != null ? <Tag {...tag} /> : null}
       </Flex>
       {onClick != null && linkText != null ? (

diff --git a/components/src/molecules/DropdownMenu/index.tsx b/components/src/molecules/DropdownMenu/index.tsx
@@ -69,6 +69,8 @@ export interface DropdownMenuProps {
   onBlur?: React.FocusEventHandler<HTMLButtonElement>
   /** optional disabled */
   disabled?: boolean
+  /** force direction for pd after release this will be fixed and remove */
+  forceDirection?: boolean
 }
 
 // TODO: (smb: 4/15/22) refactor this to use html select for accessibility
@@ -88,6 +90,7 @@ export function DropdownMenu(props: DropdownMenuProps): JSX.Element {
     disabled = false,
     onFocus,
     onBlur,
+    forceDirection = false,
   } = props
   const [targetProps, tooltipProps] = useHoverTooltip()
   const [showDropdownMenu, setShowDropdownMenu] = React.useState<boolean>(false)
@@ -105,6 +108,7 @@ export function DropdownMenu(props: DropdownMenuProps): JSX.Element {
   })
 
   React.useEffect(() => {
+    if (forceDirection) return
     const handlePositionCalculation = (): void => {
       const dropdownRect = dropDownMenuWrapperRef.current?.getBoundingClientRect()
       if (dropdownRect != null) {

diff --git a/protocol-designer/src/pages/CreateNewProtocolWizard/SelectFixtures.tsx b/protocol-designer/src/pages/CreateNewProtocolWizard/SelectFixtures.tsx
@@ -158,6 +158,7 @@ export function SelectFixtures(props: WizardTileProps): JSX.Element | null {
                 return (
                   <ListItem type="noActive" key={ae}>
                     <ListItemCustomize
+                      forceDirection
                       linkText={t('remove')}
                       onClick={() => {
                         setValue(

diff --git a/protocol-designer/src/pages/CreateNewProtocolWizard/SelectModules.tsx b/protocol-designer/src/pages/CreateNewProtocolWizard/SelectModules.tsx
@@ -258,6 +258,7 @@ export function SelectModules(props: WizardTileProps): JSX.Element | null {
                       return (
                         <ListItem type="noActive" key={`${module.model}`}>
                           <ListItemCustomize
+                            forceDirection
                             dropdown={
                               MOAM_MODULE_TYPES.includes(module.type) &&
                               robotType === FLEX_ROBOT_TYPE