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;