feat(select next): add appendTo

patternfly · Sep 1, 2023 · b858542 · b858542
1 parent 713e587
commit b858542
Showing 1 changed file with 19 additions and 1 deletion.
diff --git a/packages/react-core/src/next/components/Select/Select.tsx b/packages/react-core/src/next/components/Select/Select.tsx
@@ -30,6 +30,14 @@ export interface SelectProps extends MenuProps, OUIAProps {
   zIndex?: number;
   /** @beta Determines the accessible role of the select. For a checkbox select pass in "menu". */
   role?: string;
+  /** The container to append the select to. Defaults to 'inline'.
+   * If your select is being cut off you can append it to an element higher up the DOM tree.
+   * Some examples:
+   * appendTo="inline"
+   * appendTo={() => document.body}
+   * appendTo={document.getElementById('target')}
+   */
+  appendTo?: HTMLElement | (() => HTMLElement) | 'inline';
 }
 
 const SelectBase: React.FunctionComponent<SelectProps & OUIAProps> = ({
@@ -45,6 +53,7 @@ const SelectBase: React.FunctionComponent<SelectProps & OUIAProps> = ({
   innerRef,
   zIndex = 9999,
   role = 'listbox',
+  appendTo = 'inline',
   ...props
 }: SelectProps & OUIAProps) => {
   const localMenuRef = React.useRef<HTMLDivElement>();
@@ -115,7 +124,7 @@ const SelectBase: React.FunctionComponent<SelectProps & OUIAProps> = ({
       <MenuContent>{children}</MenuContent>
     </Menu>
   );
-  return (
+  return appendTo === 'inline' ? (
     <div ref={containerRef}>
       <Popper
         trigger={toggle(toggleRef)}
@@ -126,6 +135,15 @@ const SelectBase: React.FunctionComponent<SelectProps & OUIAProps> = ({
         zIndex={zIndex}
       />
     </div>
+  ) : (
+    <Popper
+      trigger={toggle(toggleRef)}
+      removeFindDomNode
+      popper={menu}
+      appendTo={appendTo}
+      isVisible={isOpen}
+      zIndex={zIndex}
+    />
   );
 };