diff --git a/packages/react-core/src/components/Popover/Popover.tsx b/packages/react-core/src/components/Popover/Popover.tsx index 093e569f456..ee87b1e44c2 100644 --- a/packages/react-core/src/components/Popover/Popover.tsx +++ b/packages/react-core/src/components/Popover/Popover.tsx @@ -233,7 +233,7 @@ export const Popover: React.FunctionComponent = ({ alertSeverityVariant, alertSeverityScreenReaderText, footerContent = null, - appendTo = 'inline', + appendTo = () => document.body, hideOnOutsideClick = true, onHide = (): void => null, onHidden = (): void => null, diff --git a/packages/react-core/src/components/Popover/examples/Popover.md b/packages/react-core/src/components/Popover/examples/Popover.md index 7eaa02398c3..dd3479fdc16 100644 --- a/packages/react-core/src/components/Popover/examples/Popover.md +++ b/packages/react-core/src/components/Popover/examples/Popover.md @@ -14,10 +14,7 @@ import BullhornIcon from '@patternfly/react-icons/dist/esm/icons/bullhorn-icon'; ## Examples -By default, the `appendTo` prop of the popover will append it to the parent element. However, in some cases, the popover might be too big for the parent and not fully visible. To solve this issue, users have two options: - -1. Add the prop `appendTo={() => document.body}` to append the popover to the document body instead of the parent element. -2. Increase the z-index of the parent element to be higher than the z-index of the element that is hiding the popover. +By default, the `appendTo` prop of the popover will append to the document body in order to avoid the popover content not being fully visible. Another option is to increase the z-index of the element the popover is appended to to be higher than the z-index of the element that is hiding the popover. ### Basic diff --git a/packages/react-integration/demo-app-ts/package.json b/packages/react-integration/demo-app-ts/package.json index 0803747d73c..2c39c7a34ff 100644 --- a/packages/react-integration/demo-app-ts/package.json +++ b/packages/react-integration/demo-app-ts/package.json @@ -9,7 +9,7 @@ "serve:demo-app": "node scripts/serve" }, "dependencies": { - "@patternfly/react-core": "^5.0.0-prerelease.2", + "@patternfly/react-core": "^5.0.0-prerelease.3", "react": "^18", "react-dom": "^18", "react-router": "^5.3.3",