Allow setting a container for Radix.Portal (pacocoursey#58)

* Allow setting container to Radix Portal * add documentation for container prop * Add note explaining container prop * Replace `querySelector` in example with useRef * prettier formatting * fix up jsdoc Co-authored-by: Paco <[email protected]>
0xjojikun · Nov 16, 2022 · d7905f1 · d7905f1
1 parent 994dea6
commit d7905f1
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 3 deletions.
diff --git a/README.md b/README.md
@@ -151,6 +151,19 @@ return (
 )
 ```
 
+You can provide a `container` prop that accepts an HTML element that is forwarded to Radix UI's Dialog Portal component to specify which element the Dialog should portal into (defaults to `body`). See the [Radix Documentation](https://www.radix-ui.com/docs/primitives/components/dialog#portal) for more information.
+
+```tsx
+const containerElement = React.useRef(null)
+
+return (
+  <>
+    <Command.Dialog container={containerElement.current} />
+    <div ref={containerElement} />
+  </>
+)
+```
+
 ### Input `[cmdk-input]`
 
 All props are forwarded to the underlying `input` element. Can be controlled with the `value` and `onValueChange` props.

diff --git a/cmdk/src/index.tsx b/cmdk/src/index.tsx
@@ -14,7 +14,11 @@ type SeparatorProps = DivProps & {
   /** Whether this separator should always be rendered. Useful if you disable automatic filtering. */
   alwaysRender?: boolean
 }
-type DialogProps = RadixDialog.DialogProps & CommandProps
+type DialogProps = RadixDialog.DialogProps &
+  CommandProps & {
+    /** Provide a custom element the Dialog should portal into. */
+    container?: HTMLElement
+  }
 type ListProps = Children & DivProps & {}
 type ItemProps = Children &
   Omit<DivProps, 'disabled' | 'onSelect' | 'value'> & {
@@ -764,10 +768,10 @@ const List = React.forwardRef<HTMLDivElement, ListProps>((props, forwardedRef) =
  * Renders the command menu in a Radix Dialog.
  */
 const Dialog = React.forwardRef<HTMLDivElement, DialogProps>((props, forwardedRef) => {
-  const { open, onOpenChange, ...etc } = props
+  const { open, onOpenChange, container, ...etc } = props
   return (
     <RadixDialog.Root open={open} onOpenChange={onOpenChange}>
-      <RadixDialog.Portal>
+      <RadixDialog.Portal container={container}>
         <RadixDialog.Overlay cmdk-overlay="" />
         <RadixDialog.Content aria-label={props.label} cmdk-dialog="">
           <Command ref={forwardedRef} {...etc} />