fix(Popup): observer the resize of the target element

shervinchen · Oct 26, 2024 · 0a70c12 · 0a70c12
1 parent aff8aa1
commit 0a70c12
Show file tree

Hide file tree

Showing 6 changed files with 44 additions and 0 deletions.
diff --git a/jest-setup.ts b/jest-setup.ts
@@ -24,3 +24,9 @@ afterEach(() => {
   });
   jest.useRealTimers();
 });
+
+global.ResizeObserver = jest.fn().mockImplementation(() => ({
+  observe: jest.fn(),
+  unobserve: jest.fn(),
+  disconnect: jest.fn(),
+}));
diff --git a/packages/Popup/Popup.tsx b/packages/Popup/Popup.tsx
@@ -12,6 +12,7 @@ import {
   useMutationObserver,
   usePortal,
   useResize,
+  useResizeObserver,
   useSSR,
 } from '../utils/hooks';
 
@@ -48,6 +49,8 @@ const Popup: FC<PropsWithChildren<PopupProps>> = ({
 
   useMutationObserver(targetRef?.current, updatePopupPosition);
 
+  useResizeObserver(targetRef?.current, updatePopupPosition);
+
   useMutationObserver(container, updatePopupPosition, {
     attributes: true,
     childList: false,

diff --git a/packages/Popup/__tests__/Popup.test.tsx b/packages/Popup/__tests__/Popup.test.tsx
@@ -122,6 +122,21 @@ describe('Popup', () => {
     expect(mockGetPopupPosition).toHaveBeenCalledTimes(2);
   });
 
+  test('should update popup position when targetRef size change', async () => {
+    render(
+      <Component
+        visible
+        targetRef={targetRefMock}
+        getPopupContainer={getPopupContainerMock}
+      />
+    );
+    expect(mockGetPopupPosition).toHaveBeenCalledTimes(1);
+    targetRefMock.current.style.height = '200px';
+    await waitFor(() => {
+      expect(mockGetPopupPosition).toHaveBeenCalledTimes(2);
+    });
+  });
+
   test('should update popup position when document size change', async () => {
     render(
       <Component visible targetRef={targetRefMock} getPopupContainer={null} />

diff --git a/packages/Select/Select.tsx b/packages/Select/Select.tsx
@@ -181,6 +181,7 @@ const Select = forwardRef<SelectRef, PropsWithChildren<SelectProps>>(
       multiple,
       internalValue,
       handleChange,
+      selectRef,
       dropdownHeight,
       getPopupContainer,
       type,

diff --git a/packages/utils/hooks/index.ts b/packages/utils/hooks/index.ts
@@ -5,6 +5,7 @@ import { usePortal } from './usePortal';
 import { useResize } from './useResize';
 import { useClickAnyWhere } from './useClickAnyWhere';
 import { useMutationObserver } from './useMutationObserver';
+import { useResizeObserver } from './useResizeObserver';
 
 export {
   useControlled,
@@ -14,4 +15,5 @@ export {
   useResize,
   useClickAnyWhere,
   useMutationObserver,
+  useResizeObserver,
 };
diff --git a/packages/utils/hooks/useResizeObserver.ts b/packages/utils/hooks/useResizeObserver.ts
@@ -0,0 +1,17 @@
+import { useEffect } from 'react';
+
+export const useResizeObserver = (
+  element: HTMLElement | null | undefined,
+  callback: ResizeObserverCallback
+) => {
+  useEffect(() => {
+    if (!element) return;
+
+    const observer = new ResizeObserver(callback);
+    observer.observe(element);
+
+    return () => {
+      observer.disconnect();
+    };
+  }, [element, callback]);
+};