diff --git a/src/components/Overlay/Overlay.test.tsx b/src/components/Overlay/Overlay.test.tsx index b8e8065f..83c332c1 100644 --- a/src/components/Overlay/Overlay.test.tsx +++ b/src/components/Overlay/Overlay.test.tsx @@ -99,15 +99,15 @@ describe('Overlay modifiers', () => { const props: ModifierProps = { align: 'justify', flip: false }; const modifiers = getModifiers(props); - expect(modifiers).toHaveLength(2); + expect(modifiers).toHaveLength(3); expect( modifiers.find(({ name }) => name === 'setPopperWidth') ).toBeTruthy(); props.align = 'left'; - expect(getModifiers(props)).toHaveLength(1); + expect(getModifiers(props)).toHaveLength(2); props.align = 'right'; - expect(getModifiers(props)).toHaveLength(1); + expect(getModifiers(props)).toHaveLength(2); }); }); diff --git a/src/components/Overlay/useOverlay.ts b/src/components/Overlay/useOverlay.ts index 0bfdbb04..6fd5088d 100644 --- a/src/components/Overlay/useOverlay.ts +++ b/src/components/Overlay/useOverlay.ts @@ -29,6 +29,12 @@ export function getModifiers(props: Pick) { enabled: !!props.flip, name: 'flip', }, + { + name: 'preventOverflow', + options: { + mainAxis: false + } + } ]; if (props.align !== 'right' && props.align !== 'left') { @@ -63,7 +69,7 @@ export function useOverlay( ); const refElementHeight = referenceElement?.offsetHeight; - + // Re-position the popper if the height of the reference element changes. // Exclude `forceUpdate` from dependencies since it changes with each render. useEffect(() => {