fix(dropdown): conditional portal was moving the dropdown deep in the…

… dom
adevinta · Mar 22, 2024 · d2ea405 · d2ea405
1 parent 5ab4e12
commit d2ea405
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 22 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/packages/components/dropdown/src/DropdownPopover.tsx b/packages/components/dropdown/src/DropdownPopover.tsx
@@ -23,30 +23,32 @@ export const Popover = forwardRef(
       return () => setHasPopover(false)
     }, [])
 
-    return isOpen ? (
+    return (
       <SparkPopover.Portal>
-        <SparkPopover.Content
-          ref={forwardedRef}
-          inset
-          asChild
-          matchTriggerWidth={matchTriggerWidth}
-          className={cx('!z-dropdown', className)}
-          sideOffset={sideOffset}
-          onOpenAutoFocus={e => {
-            /**
-             * With a combobox pattern, the focus should remain on the trigger at all times.
-             * Passing the focus to the dropdown popover would break keyboard navigation.
-             */
-            e.preventDefault()
-          }}
-          {...props}
-          data-spark-component="dropdown-popover"
-        >
-          {children}
-        </SparkPopover.Content>
+        {isOpen ? (
+          <SparkPopover.Content
+            ref={forwardedRef}
+            inset
+            asChild
+            matchTriggerWidth={matchTriggerWidth}
+            className={cx('!z-dropdown', className)}
+            sideOffset={sideOffset}
+            onOpenAutoFocus={e => {
+              /**
+               * With a combobox pattern, the focus should remain on the trigger at all times.
+               * Passing the focus to the dropdown popover would break keyboard navigation.
+               */
+              e.preventDefault()
+            }}
+            {...props}
+            data-spark-component="dropdown-popover"
+          >
+            {children}
+          </SparkPopover.Content>
+        ) : (
+          children
+        )}
       </SparkPopover.Portal>
-    ) : (
-      children
     )
   }
 )