diff --git a/packages/core/chrome/core-chrome-browser-internal/src/ui/header/header_action_menu.test.tsx b/packages/core/chrome/core-chrome-browser-internal/src/ui/header/header_action_menu.test.tsx
index 9a7b4fa5a8b14..359439f3e4cdf 100644
--- a/packages/core/chrome/core-chrome-browser-internal/src/ui/header/header_action_menu.test.tsx
+++ b/packages/core/chrome/core-chrome-browser-internal/src/ui/header/header_action_menu.test.tsx
@@ -147,4 +147,24 @@ describe('HeaderActionMenu', () => {
expect(unmounts.FOO).toHaveBeenCalledTimes(1);
expect(unmounts.BAR).not.toHaveBeenCalled();
});
+
+ it('calls mount point `unmount` when unmounts', () => {
+ const TestComponent = () => {
+ const mounter = useHeaderActionMenuMounter(menuMount$);
+ return ;
+ };
+ component = mount();
+
+ act(() => {
+ menuMount$.next(createMountPoint('FOO'));
+ });
+ refresh();
+
+ expect(Object.keys(unmounts)).toEqual(['FOO']);
+ expect(unmounts.FOO).not.toHaveBeenCalled();
+
+ component.unmount();
+
+ expect(unmounts.FOO).toHaveBeenCalledTimes(1);
+ });
});
diff --git a/packages/core/chrome/core-chrome-browser-internal/src/ui/header/header_action_menu.tsx b/packages/core/chrome/core-chrome-browser-internal/src/ui/header/header_action_menu.tsx
index ec2a06266a0fe..91d2077b28ea9 100644
--- a/packages/core/chrome/core-chrome-browser-internal/src/ui/header/header_action_menu.tsx
+++ b/packages/core/chrome/core-chrome-browser-internal/src/ui/header/header_action_menu.tsx
@@ -39,11 +39,6 @@ export const HeaderActionMenu: FC = ({ mounter }) => {
const unmountRef = useRef(null);
useLayoutEffect(() => {
- if (unmountRef.current) {
- unmountRef.current();
- unmountRef.current = null;
- }
-
if (mounter.mount && elementRef.current) {
try {
unmountRef.current = mounter.mount(elementRef.current);
@@ -53,6 +48,12 @@ export const HeaderActionMenu: FC = ({ mounter }) => {
console.error(e);
}
}
+ return () => {
+ if (unmountRef.current) {
+ unmountRef.current();
+ unmountRef.current = null;
+ }
+ };
}, [mounter]);
return ;