diff --git a/packages/material-ui/src/Popover/Popover.js b/packages/material-ui/src/Popover/Popover.js index 58e4d23d7a2e7c..7651a5cedb5ac6 100644 --- a/packages/material-ui/src/Popover/Popover.js +++ b/packages/material-ui/src/Popover/Popover.js @@ -307,27 +307,30 @@ const Popover = React.forwardRef(function Popover(props, ref) { ], ); - const setPositioningStyles = React.useCallback( - element => { - const positioning = getPositioningStyle(element); + const setPositioningStyles = React.useCallback(() => { + const element = paperRef.current; - if (positioning.top !== null) { - element.style.top = positioning.top; - } - if (positioning.left !== null) { - element.style.left = positioning.left; - } - element.style.transformOrigin = positioning.transformOrigin; - }, - [getPositioningStyle], - ); + if (!element) { + return; + } + + const positioning = getPositioningStyle(element); + + if (positioning.top !== null) { + element.style.top = positioning.top; + } + if (positioning.left !== null) { + element.style.left = positioning.left; + } + element.style.transformOrigin = positioning.transformOrigin; + }, [getPositioningStyle]); const handleEntering = (element, isAppearing) => { if (onEntering) { onEntering(element, isAppearing); } - setPositioningStyles(element); + setPositioningStyles(); }; const handlePaperRef = React.useCallback(instance => { @@ -335,32 +338,40 @@ const Popover = React.forwardRef(function Popover(props, ref) { paperRef.current = ReactDOM.findDOMNode(instance); }, []); - const updatePosition = React.useMemo(() => { - if (!open) { - return undefined; + React.useEffect(() => { + if (open) { + setPositioningStyles(); } + }); - return debounce(() => { - setPositioningStyles(paperRef.current); - }); - }, [open, setPositioningStyles]); - - React.useImperativeHandle(action, () => (open ? { updatePosition } : null), [ - open, - updatePosition, - ]); + React.useImperativeHandle( + action, + () => + open + ? { + updatePosition: () => { + setPositioningStyles(); + }, + } + : null, + [open, setPositioningStyles], + ); React.useEffect(() => { - if (!updatePosition) { + if (!open) { return undefined; } - window.addEventListener('resize', updatePosition); + const handleResize = debounce(() => { + setPositioningStyles(); + }); + + window.addEventListener('resize', handleResize); return () => { - window.removeEventListener('resize', updatePosition); - updatePosition.clear(); + handleResize.clear(); + window.removeEventListener('rezise', handleResize); }; - }, [updatePosition]); + }, [open, setPositioningStyles]); let transitionDuration = transitionDurationProp; diff --git a/packages/material-ui/src/Popover/Popover.test.js b/packages/material-ui/src/Popover/Popover.test.js index b43630e04dd673..6a576f7c1bcf2d 100644 --- a/packages/material-ui/src/Popover/Popover.test.js +++ b/packages/material-ui/src/Popover/Popover.test.js @@ -616,13 +616,14 @@ describe('', () => { clock = useFakeTimers(); windowInnerHeight = window.innerHeight; + window.innerHeight = 8; + const mockedAnchor = document.createElement('div'); stub(mockedAnchor, 'getBoundingClientRect').callsFake(() => ({ left: 0, top: 9, })); const handleEntering = spy(); - window.innerHeight = 8; wrapper = mount( ', () => { it('should be able to manually recalculate position', () => { let popoverActions; wrapper.setProps({ - open: false, + open: true, action: actions => { popoverActions = actions; }, }); - wrapper.setProps({ - open: true, - }); const beforeStyle = { top: element.style.top, left: element.style.left, diff --git a/packages/material-ui/src/Slide/Slide.js b/packages/material-ui/src/Slide/Slide.js index e8f9873bbd3297..49a6b00efb7874 100644 --- a/packages/material-ui/src/Slide/Slide.js +++ b/packages/material-ui/src/Slide/Slide.js @@ -173,22 +173,21 @@ const Slide = React.forwardRef(function Slide(props, ref) { React.useEffect(() => { // Skip configuration where the position is screen size invariant. - if (!inProp && direction !== 'down' && direction !== 'right') { - const handleResize = debounce(() => { - if (childrenRef.current) { - setTranslateValue(direction, childrenRef.current); - } - }); - - window.addEventListener('resize', handleResize); - - return () => { - handleResize.clear(); - window.removeEventListener('resize', handleResize); - }; + if (inProp || direction === 'down' || direction === 'right') { + return undefined; } - return undefined; + const handleResize = debounce(() => { + if (childrenRef.current) { + setTranslateValue(direction, childrenRef.current); + } + }); + + window.addEventListener('resize', handleResize); + return () => { + handleResize.clear(); + window.removeEventListener('resize', handleResize); + }; }, [direction, inProp]); React.useEffect(() => { diff --git a/packages/material-ui/src/Tabs/ScrollbarSize.js b/packages/material-ui/src/Tabs/ScrollbarSize.js index f0953dfbcb1ab5..432aff9bbb9f06 100644 --- a/packages/material-ui/src/Tabs/ScrollbarSize.js +++ b/packages/material-ui/src/Tabs/ScrollbarSize.js @@ -35,7 +35,6 @@ export default function ScrollbarSize(props) { }); window.addEventListener('resize', handleResize); - return () => { handleResize.clear(); window.removeEventListener('resize', handleResize);