diff --git a/packages/strapi-design-system/src/Popover/Popover.js b/packages/strapi-design-system/src/Popover/Popover.js index a2cece644..8100c94aa 100644 --- a/packages/strapi-design-system/src/Popover/Popover.js +++ b/packages/strapi-design-system/src/Popover/Popover.js @@ -87,7 +87,7 @@ const PopoverContent = ({ source, children, spacing, fullWidth, onReachEnd, inte position(source.current, popoverRef.current, fullWidth, centered, spacing), ); - useResizeObserver(source, () => + useResizeObserver([source, popoverRef], () => setPosition(position(source.current, popoverRef.current, fullWidth, centered, spacing)), ); useIntersection(popoverRef, onReachEnd, { diff --git a/packages/strapi-design-system/src/helpers/useResizeObserver.js b/packages/strapi-design-system/src/helpers/useResizeObserver.js index 8bc548e7d..fdbb5fbe0 100644 --- a/packages/strapi-design-system/src/helpers/useResizeObserver.js +++ b/packages/strapi-design-system/src/helpers/useResizeObserver.js @@ -1,9 +1,13 @@ import { useEffect } from 'react'; -export const useResizeObserver = (source, onResize) => { +export const useResizeObserver = (sources, onResize) => { useEffect(() => { const resizeObs = new ResizeObserver(onResize); - resizeObs.observe(source.current); + if (Array.isArray(sources)) { + sources.map((source) => resizeObs.observe(source.current)); + } else { + resizeObs.observe(sources.current); + } return () => { resizeObs.disconnect();