fix: Affix shake when switching from hide to show (ant-design#38410)

* fix: do not measure when Affix is hidden * feat: add test
kievechua · Nov 7, 2022 · 0438b0b · 0438b0b
1 parent 2c9fbc8
commit 0438b0b
Show file tree

Hide file tree

Showing 2 changed files with 40 additions and 0 deletions.
diff --git a/components/affix/__tests__/Affix.test.tsx b/components/affix/__tests__/Affix.test.tsx
@@ -15,6 +15,7 @@ class AffixMounter extends React.Component<{
   onTestUpdatePosition?(): void;
   onChange?: () => void;
   getInstance?: (inst: InternalAffixClass) => void;
+  style?: React.CSSProperties;
 }> {
   private container: HTMLDivElement;
 
@@ -201,6 +202,7 @@ describe('Affix Render', () => {
       expect(getObserverEntities()).toHaveLength(1);
       expect(getObserverEntities()[0].target).toBe(window);
     });
+
     it('check position change before measure', async () => {
       const { container } = render(
         <>
@@ -216,6 +218,35 @@ describe('Affix Render', () => {
       await movePlaceholder(1000);
       expect(container.querySelector('.ant-affix')).toBeTruthy();
     });
+
+    it('do not measure when hidden', async () => {
+      let affixInstance: InternalAffixClass | null = null;
+
+      const { rerender } = render(
+        <AffixMounter
+          getInstance={inst => {
+            affixInstance = inst;
+          }}
+          offsetBottom={0}
+        />,
+      );
+      await waitFakeTimer();
+      const firstAffixStyle = affixInstance!.state.affixStyle;
+
+      rerender(
+        <AffixMounter
+          getInstance={inst => {
+            affixInstance = inst;
+          }}
+          offsetBottom={0}
+          style={{ display: 'none' }}
+        />,
+      );
+      await waitFakeTimer();
+      const secondAffixStyle = affixInstance!.state.affixStyle;
+
+      expect(firstAffixStyle).toEqual(secondAffixStyle);
+    });
   });
 
   describe('updatePosition when size changed', () => {

diff --git a/components/affix/index.tsx b/components/affix/index.tsx
@@ -169,6 +169,15 @@ class Affix extends React.Component<InternalAffixProps, AffixState> {
     const fixedTop = getFixedTop(placeholderReact, targetRect, offsetTop);
     const fixedBottom = getFixedBottom(placeholderReact, targetRect, offsetBottom);
 
+    if (
+      placeholderReact.top === 0 &&
+      placeholderReact.left === 0 &&
+      placeholderReact.width === 0 &&
+      placeholderReact.height === 0
+    ) {
+      return;
+    }
+
     if (fixedTop !== undefined) {
       newState.affixStyle = {
         position: 'fixed',