[@mantine/core] Menu: Fix incorrect logic for controlled opened state (…

…#2701) * [@mantine/core] Select: only use open/close callback when value changes * [@mantine/core] Select: do not use early return * [@mantine/core] Menu - revert PR #2646 * [@mantine/core] Menu - remove unused imports
mantinedev · Oct 18, 2022 · 1158833 · 1158833
1 parent 44a58be
commit 1158833
Show file tree

Hide file tree

Showing 2 changed files with 2 additions and 43 deletions.
diff --git a/src/mantine-core/src/Menu/Menu.story.tsx b/src/mantine-core/src/Menu/Menu.story.tsx
@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from 'react';
+import React from 'react';
 import { IconTable, IconSearch } from '@tabler/icons';
 import { WithinOverlays } from '@mantine/storybook';
 import { Menu } from './Menu';
@@ -87,42 +87,3 @@ 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>
-  );
-}
diff --git a/src/mantine-core/src/Menu/MenuTarget/MenuTarget.tsx b/src/mantine-core/src/Menu/MenuTarget/MenuTarget.tsx
@@ -1,4 +1,4 @@
-import React, { cloneElement, forwardRef, useEffect } from 'react';
+import React, { cloneElement, forwardRef } from 'react';
 import { isElement, createEventHandler } from '@mantine/utils';
 import { useMenuContext } from '../Menu.context';
 import { Popover } from '../../Popover';
@@ -35,8 +35,6 @@ 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, {