Updated appendTo based on new Popper logic

patternfly · Feb 10, 2023 · e6222bc · e6222bc
1 parent 5f7d441
commit e6222bc
Show file tree

Hide file tree

Showing 3 changed files with 45 additions and 71 deletions.
diff --git a/packages/react-core/src/components/Popover/Popover.tsx b/packages/react-core/src/components/Popover/Popover.tsx
@@ -277,7 +277,6 @@ export const Popover: React.FunctionComponent<PopoverProps> = ({
   const transitionTimerRef = React.useRef(null);
   const showTimerRef = React.useRef(null);
   const hideTimerRef = React.useRef(null);
-  const containerRef = React.useRef<HTMLDivElement>(null);
 
   React.useEffect(() => {
     onMount();
@@ -455,41 +454,25 @@ export const Popover: React.FunctionComponent<PopoverProps> = ({
     </FocusTrap>
   );
 
-  const getInlineReference = () => {
-    if (reference) {
-      if ((reference as React.RefObject<any>)?.current) {
-        return (reference as React.RefObject<any>)?.current.parentElement;
-      } else if (typeof reference === 'function') {
-        return reference()?.parentElement;
-      }
-    }
-
-    return containerRef?.current;
-  };
-
-  const popoverPopper = (
-    <Popper
-      trigger={children}
-      reference={reference}
-      popper={content}
-      popperMatchesTriggerWidth={false}
-      appendTo={appendTo === 'inline' ? getInlineReference || undefined : appendTo}
-      isVisible={visible}
-      positionModifiers={positionModifiers}
-      distance={distance}
-      placement={position}
-      onTriggerClick={onTriggerClick}
-      onDocumentClick={onDocumentClick}
-      onDocumentKeyDown={onDocumentKeyDown}
-      enableFlip={enableFlip}
-      zIndex={zIndex}
-      flipBehavior={flipBehavior}
-    />
-  );
-
   return (
     <PopoverContext.Provider value={{ headerComponent }}>
-      {appendTo === 'inline' && children ? <div ref={containerRef}>{popoverPopper}</div> : popoverPopper}
+      <Popper
+        trigger={children}
+        reference={reference}
+        popper={content}
+        popperMatchesTriggerWidth={false}
+        appendTo={appendTo}
+        isVisible={visible}
+        positionModifiers={positionModifiers}
+        distance={distance}
+        placement={position}
+        onTriggerClick={onTriggerClick}
+        onDocumentClick={onDocumentClick}
+        onDocumentKeyDown={onDocumentKeyDown}
+        enableFlip={enableFlip}
+        zIndex={zIndex}
+        flipBehavior={flipBehavior}
+      />
     </PopoverContext.Provider>
   );
 };

diff --git a/packages/react-core/src/components/Popover/__tests__/__snapshots__/Popover.test.tsx.snap b/packages/react-core/src/components/Popover/__tests__/__snapshots__/Popover.test.tsx.snap
@@ -2,71 +2,61 @@
 
 exports[`popover can close from content (uncontrolled) 1`] = `
 <DocumentFragment>
-  <div>
-    <div
-      style="display: contents;"
+  <div
+    style="display: contents;"
+  >
+    <button
+      id="uncontrolled-toggle"
     >
-      <button
-        id="uncontrolled-toggle"
-      >
-        Toggle Popover
-      </button>
-    </div>
+      Toggle Popover
+    </button>
   </div>
 </DocumentFragment>
 `;
 
 exports[`popover can have a custom minimum width 1`] = `
 <DocumentFragment>
-  <div>
-    <div
-      style="display: contents;"
-    >
-      <div>
-        Toggle Popover
-      </div>
+  <div
+    style="display: contents;"
+  >
+    <div>
+      Toggle Popover
     </div>
   </div>
 </DocumentFragment>
 `;
 
 exports[`popover can specify position as object value 1`] = `
 <DocumentFragment>
-  <div>
-    <div
-      style="display: contents;"
-    >
-      <div>
-        Toggle Popover
-      </div>
+  <div
+    style="display: contents;"
+  >
+    <div>
+      Toggle Popover
     </div>
   </div>
 </DocumentFragment>
 `;
 
 exports[`popover renders close-button, header and body 1`] = `
 <DocumentFragment>
-  <div>
-    <div
-      style="display: contents;"
-    >
-      <div>
-        Toggle Popover
-      </div>
+  <div
+    style="display: contents;"
+  >
+    <div>
+      Toggle Popover
     </div>
   </div>
 </DocumentFragment>
 `;
 
 exports[`popover renders in strict mode 1`] = `
 <DocumentFragment>
-  <div>
-    <div
-      style="display: contents;"
-    >
-      <div>
-        Toggle Popover
-      </div>
+  <div
+    style="display: contents;"
+  >
+    <div>
+      Toggle Popover
     </div>
   </div>
 </DocumentFragment>

diff --git a/packages/react-integration/demo-app-ts/src/components/demos/PopoverDemo/PopoverDemo.tsx b/packages/react-integration/demo-app-ts/src/components/demos/PopoverDemo/PopoverDemo.tsx
@@ -86,6 +86,7 @@ export class PopoverDemo extends Component {
           bodyContent="I have a custom heading level."
           footerContent="Popover footer"
           headerComponent="h1"
+          position="auto"
         >
           <button id="popover-heading-level-toggle">Toggle Popover</button>
         </Popover>