diff --git a/packages/@react-aria/overlays/src/useOverlayPosition.ts b/packages/@react-aria/overlays/src/useOverlayPosition.ts index d5bf2ee1e06..ecbea526353 100644 --- a/packages/@react-aria/overlays/src/useOverlayPosition.ts +++ b/packages/@react-aria/overlays/src/useOverlayPosition.ts @@ -166,6 +166,7 @@ export function useOverlayPosition(props: AriaPositionProps): PositionAria { let overlay = (overlayRef.current as HTMLElement); if (!maxHeight && overlayRef.current) { overlay.style.top = '0px'; + overlay.style.left = '0px'; overlay.style.bottom = ''; overlay.style.maxHeight = (window.visualViewport?.height ?? window.innerHeight) + 'px'; } diff --git a/packages/react-aria-components/stories/Popover.stories.tsx b/packages/react-aria-components/stories/Popover.stories.tsx index ba700b5fba1..e8f9ff2de1c 100644 --- a/packages/react-aria-components/stories/Popover.stories.tsx +++ b/packages/react-aria-components/stories/Popover.stories.tsx @@ -10,7 +10,7 @@ * governing permissions and limitations under the License. */ -import {Button, Dialog, DialogTrigger, Heading, OverlayArrow, Popover} from 'react-aria-components'; +import {Button, Dialog, DialogTrigger, Heading, MenuTrigger, OverlayArrow, Popover} from 'react-aria-components'; import React, {useEffect, useRef, useState} from 'react'; export default { @@ -433,3 +433,28 @@ export const PopoverTriggerWidthExample = () => ( ); + +const PopoverRightExampleContent = () => { + const [s, ss] = useState(false); + useEffect(() => { + setTimeout(() => { + ss(true); + }, 1500); + }); + return s ? ( +