diff --git a/UNRELEASED.md b/UNRELEASED.md index bf3d4ad003d..cd1161fe2f1 100644 --- a/UNRELEASED.md +++ b/UNRELEASED.md @@ -13,6 +13,7 @@ Use [the changelog guidelines](https://git.io/polaris-changelog-guidelines) to f ### Bug fixes - Fixed a bug in `Banner` where loading state wasn't getting passed to `primaryAction` ([#4338](https://github.com/Shopify/polaris-react/pull/4338)) +- Fixed `Popover` not correctly positioning itself ([#4357](https://github.com/Shopify/polaris-react/pull/4357)) - Fixed a bug `TextField` where Safari would render the incorrect text color ([#4344](https://github.com/Shopify/polaris-react/pull/4344)) ### Documentation diff --git a/src/components/PositionedOverlay/PositionedOverlay.tsx b/src/components/PositionedOverlay/PositionedOverlay.tsx index 3491fe8bee8..a4649666c25 100644 --- a/src/components/PositionedOverlay/PositionedOverlay.tsx +++ b/src/components/PositionedOverlay/PositionedOverlay.tsx @@ -57,7 +57,11 @@ interface State { lockPosition: boolean; } -const OBSERVER_CONFIG = {childList: true, subtree: true}; +const OBSERVER_CONFIG = { + childList: true, + subtree: true, + characterData: true, +}; export class PositionedOverlay extends PureComponent< PositionedOverlayProps, @@ -278,6 +282,7 @@ export class PositionedOverlay extends PureComponent< () => { if (!this.overlay) return; this.observer.observe(this.overlay, OBSERVER_CONFIG); + this.observer.observe(activator, OBSERVER_CONFIG); }, ); }, diff --git a/src/components/PositionedOverlay/tests/PositionedOverlay.test.tsx b/src/components/PositionedOverlay/tests/PositionedOverlay.test.tsx index 6adddc7dc32..1bd293a64b3 100644 --- a/src/components/PositionedOverlay/tests/PositionedOverlay.test.tsx +++ b/src/components/PositionedOverlay/tests/PositionedOverlay.test.tsx @@ -24,6 +24,38 @@ describe('', () => { }); }); + describe('mutation observer', () => { + let mutationObserverObserveSpy: jest.SpyInstance; + + beforeEach(() => { + mutationObserverObserveSpy = jest.spyOn( + MutationObserver.prototype, + 'observe', + ); + }); + + afterEach(() => { + mutationObserverObserveSpy.mockRestore(); + }); + + it('observers the activator', () => { + const activator = document.createElement('button'); + mountWithAppProvider( + , + ); + + expect(mutationObserverObserveSpy).toHaveBeenCalledWith(activator, { + characterData: true, + childList: true, + subtree: true, + }); + }); + }); + describe('preferredPosition', () => { let calculateVerticalPositionMock: jest.SpyInstance;