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
;