diff --git a/components/affix/__tests__/Affix.test.tsx b/components/affix/__tests__/Affix.test.tsx index 0315eec15a..c60c1244fa 100644 --- 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( + { + affixInstance = inst; + }} + offsetBottom={0} + />, + ); + await waitFakeTimer(); + const firstAffixStyle = affixInstance!.state.affixStyle; + + rerender( + { + 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 index 6c6d7722c2..578bbfd883 100644 --- a/components/affix/index.tsx +++ b/components/affix/index.tsx @@ -169,6 +169,15 @@ class Affix extends React.Component { 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',