fix(popper): improve flip behavior in RTL (#9640)

* fix(popper): improve flip behavior in RTL * feat(Popper): added prop for the preventOverflow modifier * Update packages/react-core/src/helpers/Popper/Popper.tsx Co-authored-by: Eric Olkowski <[email protected]> * chore(popper): expose preventOverflow option in popperProps interfaces --------- Co-authored-by: Eric Olkowski <[email protected]>
patternfly · Oct 27, 2023 · 22bd847 · 22bd847
1 parent bbd82ab
commit 22bd847
Show file tree

Hide file tree

Showing 4 changed files with 11 additions and 2 deletions.
diff --git a/packages/react-core/src/components/Dropdown/Dropdown.tsx b/packages/react-core/src/components/Dropdown/Dropdown.tsx
@@ -19,6 +19,8 @@ export interface DropdownPopperProps {
   enableFlip?: boolean;
   /** The container to append the popper to. Defaults to 'inline'. */
   appendTo?: HTMLElement | (() => HTMLElement) | 'inline';
+  /** Flag to prevent the popper from overflowing its container and becoming partially obscured. */
+  preventOverflow?: boolean;
 }
 
 export interface DropdownToggleProps {

diff --git a/packages/react-core/src/components/Menu/MenuContainer.tsx b/packages/react-core/src/components/Menu/MenuContainer.tsx
@@ -14,6 +14,8 @@ export interface MenuPopperProps {
   maxWidth?: string | 'trigger';
   /** Enable to flip the popper when it reaches the boundary */
   enableFlip?: boolean;
+  /** Flag to prevent the popper from overflowing its container and becoming partially obscured. */
+  preventOverflow?: boolean;
 }
 export interface MenuContainerProps {
   /** Menu to be rendered */

diff --git a/packages/react-core/src/components/Select/Select.tsx b/packages/react-core/src/components/Select/Select.tsx
@@ -25,6 +25,8 @@ export interface SelectPopperProps {
    * appendTo={document.getElementById('target')}
    */
   appendTo?: HTMLElement | (() => HTMLElement) | 'inline';
+  /** Flag to prevent the popper from overflowing its container and becoming partially obscured. */
+  preventOverflow?: boolean;
 }
 
 export interface SelectToggleProps {

diff --git a/packages/react-core/src/helpers/Popper/Popper.tsx b/packages/react-core/src/helpers/Popper/Popper.tsx
@@ -186,6 +186,8 @@ export interface PopperProps {
    * Lifecycle function invoked when the popper has fully transitioned in.
    */
   onShown?: () => void;
+  /** Flag to prevent the popper from overflowing its container and becoming partially obscured. */
+  preventOverflow?: boolean;
 }
 
 export const Popper: React.FunctionComponent<PopperProps> = ({
@@ -224,7 +226,8 @@ export const Popper: React.FunctionComponent<PopperProps> = ({
   onHide = () => {},
   onMount = () => {},
   onShow = () => {},
-  onShown = () => {}
+  onShown = () => {},
+  preventOverflow = false
 }) => {
   const [triggerElement, setTriggerElement] = React.useState(null);
   const [refElement, setRefElement] = React.useState<HTMLElement>(null);
@@ -436,7 +439,7 @@ export const Popper: React.FunctionComponent<PopperProps> = ({
       },
       {
         name: 'preventOverflow',
-        enabled: false
+        enabled: preventOverflow
       },
       {
         // adds attribute [data-popper-reference-hidden] to the popper element which can be used to hide it using CSS