diff --git a/packages/@react-spectrum/overlays/src/Underlay.tsx b/packages/@react-spectrum/overlays/src/Underlay.tsx index cd732301151..da9911834d8 100644 --- a/packages/@react-spectrum/overlays/src/Underlay.tsx +++ b/packages/@react-spectrum/overlays/src/Underlay.tsx @@ -11,6 +11,7 @@ */ import {classNames} from '@react-spectrum/utils'; +import {isScrollable} from '@react-aria/utils'; import React, {JSX} from 'react'; import underlayStyles from '@adobe/spectrum-css-temp/components/underlay/vars.css'; @@ -20,12 +21,20 @@ interface UnderlayProps { } export function Underlay({isOpen, isTransparent, ...otherProps}: UnderlayProps): JSX.Element { + let pageHeight: number | undefined = undefined; + if (typeof document !== 'undefined') { + let scrollingElement = isScrollable(document.body) ? document.body : document.scrollingElement || document.documentElement; + // Prevent Firefox from adding scrollbars when the page has a fractional height. + let fractionalHeightDifference = scrollingElement.getBoundingClientRect().height % 1; + pageHeight = scrollingElement.scrollHeight - fractionalHeightDifference; + } + return (
{(renderProps) => ( <> - :not([slot=icon], [slot=avatar], [slot=label]) {display: none;}')}> + :not([slot=icon], [slot=avatar], [slot=label], [data-slot=label]) {display: none;}')}> {({selectedItems, defaultChildren}) => { return ( ; + return
; } const columnStyles = style({ diff --git a/packages/@react-spectrum/s2/stories/Picker.stories.tsx b/packages/@react-spectrum/s2/stories/Picker.stories.tsx index b945860c127..e5685f6b536 100644 --- a/packages/@react-spectrum/s2/stories/Picker.stories.tsx +++ b/packages/@react-spectrum/s2/stories/Picker.stories.tsx @@ -153,17 +153,17 @@ export const WithAvatars: Story = { - User One + User One user.one@example.com - User Two + User Two user.two@example.com
123-456-7890
- User Three + User Three
), diff --git a/packages/react-aria-components/src/Modal.tsx b/packages/react-aria-components/src/Modal.tsx index a4b5e75e74c..90454456369 100644 --- a/packages/react-aria-components/src/Modal.tsx +++ b/packages/react-aria-components/src/Modal.tsx @@ -13,7 +13,7 @@ import {AriaModalOverlayProps, DismissButton, Overlay, useIsSSR, useModalOverlay} from 'react-aria'; import {ContextValue, Provider, RenderProps, SlotProps, useContextProps, useRenderProps} from './utils'; import {DOMAttributes, forwardRefType, GlobalDOMAttributes, RefObject} from '@react-types/shared'; -import {filterDOMProps, mergeProps, mergeRefs, useEnterAnimation, useExitAnimation, useObjectRef, useViewportSize} from '@react-aria/utils'; +import {filterDOMProps, isScrollable, mergeProps, mergeRefs, useEnterAnimation, useExitAnimation, useObjectRef, useViewportSize} from '@react-aria/utils'; import {OverlayTriggerProps, OverlayTriggerState, useOverlayTriggerState} from 'react-stately'; import {OverlayTriggerStateContext} from './Dialog'; import React, {createContext, ForwardedRef, forwardRef, useContext, useMemo, useRef} from 'react'; @@ -171,10 +171,18 @@ function ModalOverlayInner({UNSTABLE_portalContainer, ...props}: ModalOverlayInn }); let viewport = useViewportSize(); + let pageHeight: number | undefined = undefined; + if (typeof document !== 'undefined') { + let scrollingElement = isScrollable(document.body) ? document.body : document.scrollingElement || document.documentElement; + // Prevent Firefox from adding scrollbars when the page has a fractional height. + let fractionalHeightDifference = scrollingElement.getBoundingClientRect().height % 1; + pageHeight = scrollingElement.scrollHeight - fractionalHeightDifference; + } + let style = { ...renderProps.style, '--visual-viewport-height': viewport.height + 'px', - '--page-height': typeof document !== 'undefined' ? document.body.getBoundingClientRect().height + 'px' : undefined + '--page-height': pageHeight !== undefined ? pageHeight + 'px' : undefined }; return (