[@mantine/core] Menu: Close menu when target changes (#2646)

* [@mantine/core] Select: only use open/close callback when value changes

* [@mantine/core] Select: do not use early return

* [@mantine/core] Menu: close menu on menu target children cleanup

* [@mantine/core] Menu: close menu in useeffect

* [@mantine/core] Menu: dont invoke fn

src/mantine-core/src/Menu/Menu.story.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useState, useEffect } from 'react';
 import { IconTable, IconSearch } from '@tabler/icons';
 import { WithinOverlays } from '@mantine/storybook';
 import { Menu } from './Menu';
@@ -87,3 +87,42 @@ export function MenuTargetWithTooltip() {
     </div>
   );
 }
+
+export function WithinStickyHeaderPortal() {
+  const [isSticky, setIsSticky] = useState(false);
+
+  useEffect(() => {
+    const makeSticky = () => {
+      setIsSticky(window.scrollY > 0);
+    };
+
+    document.addEventListener('scroll', makeSticky);
+
+    return () => {
+      document.removeEventListener('scroll', makeSticky);
+    };
+  });
+
+  return (
+    <div style={{ padding: 40, height: 2000 }}>
+      <div
+        className="header"
+        style={{ display: 'flex', position: 'sticky', top: 0, backgroundColor: 'lightgray' }}
+      >
+        <div>Header</div>
+        <div style={{ visibility: isSticky ? 'hidden' : 'visible' }}>
+          <Menu withinPortal>
+            <Menu.Target>
+              <Button>Open Menu</Button>
+            </Menu.Target>
+
+            <Menu.Dropdown>
+              <Menu.Item>Item 1</Menu.Item>
+              <Menu.Item>Item 2</Menu.Item>
+            </Menu.Dropdown>
+          </Menu>
+        </div>
+      </div>
+    </div>
+  );
+}

src/mantine-core/src/Menu/MenuTarget/MenuTarget.tsx

@@ -1,4 +1,4 @@
-import React, { cloneElement, forwardRef } from 'react';
+import React, { cloneElement, forwardRef, useEffect } from 'react';
 import { isElement, createEventHandler } from '@mantine/utils';
 import { useMenuContext } from '../Menu.context';
 import { Popover } from '../../Popover';
@@ -35,6 +35,8 @@ export const MenuTarget = forwardRef<HTMLElement, MenuTargetProps>(
       () => ctx.trigger === 'hover' && ctx.closeDropdown()
     );
 
+    useEffect(() => ctx.closeDropdown, [children]);
+
     return (
       <Popover.Target refProp={refProp} popupType="menu" ref={ref} {...others}>
         {cloneElement(children, {