diff --git a/change/@fluentui-react-positioning-86dcd6cd-76f3-4f49-b446-04e827493aa7.json b/change/@fluentui-react-positioning-86dcd6cd-76f3-4f49-b446-04e827493aa7.json new file mode 100644 index 00000000000000..d838c265b96631 --- /dev/null +++ b/change/@fluentui-react-positioning-86dcd6cd-76f3-4f49-b446-04e827493aa7.json @@ -0,0 +1,7 @@ +{ + "type": "patch", + "comment": "fix: autoSize causing maximum positioning update", + "packageName": "@fluentui/react-positioning", + "email": "yuanboxue@microsoft.com", + "dependentChangeType": "patch" +} diff --git a/packages/react-components/react-positioning/src/middleware/maxSize.test.ts b/packages/react-components/react-positioning/src/middleware/maxSize.test.ts new file mode 100644 index 00000000000000..f58d086bcc49b9 --- /dev/null +++ b/packages/react-components/react-positioning/src/middleware/maxSize.test.ts @@ -0,0 +1,30 @@ +import { Platform, computePosition } from '@floating-ui/dom'; +import { resetMaxSize } from './maxSize'; + +const referenceRect: Partial = { x: 0, y: 0, width: 100, height: 100 }; +const floatingRect: Partial = { x: 0, y: 0, width: 50, height: 50 }; +const mockGetElementRects = jest.fn(() => + Promise.resolve({ + reference: referenceRect, + floating: floatingRect, + }), +); +const platform = { + getElementRects: mockGetElementRects, +} as Partial as Platform; + +describe('maxSize', () => { + it('resetMaxSize reset once per life cycle', async () => { + expect.hasAssertions(); + const button = document.createElement('div'); + const tooltip = document.createElement('div'); + const autoSize = { applyMaxHeight: true, applyMaxWidth: true }; + + await computePosition(button, tooltip, { + placement: 'right', + middleware: [resetMaxSize(autoSize)], + platform, + }); + expect(mockGetElementRects).toHaveBeenCalledTimes(2); + }); +}); diff --git a/packages/react-components/react-positioning/src/middleware/maxSize.ts b/packages/react-components/react-positioning/src/middleware/maxSize.ts index 760668c41700fe..0af9a944b97943 100644 --- a/packages/react-components/react-positioning/src/middleware/maxSize.ts +++ b/packages/react-components/react-positioning/src/middleware/maxSize.ts @@ -13,8 +13,8 @@ export interface MaxSizeMiddlewareOptions extends Pick ({ name: 'resetMaxSize', - fn({ middlewareData: { maxSizeAlreadyReset }, elements }) { - if (maxSizeAlreadyReset) { + fn({ middlewareData, elements }) { + if (middlewareData.resetMaxSize?.maxSizeAlreadyReset) { return {}; }