Menu component causes warning: "Popper: CSS "margin" styles cannot be used to apply padding..."

[binajmen]

🐛 Bug report

Popper: CSS "margin" styles cannot be used to apply padding between the popper and its reference element or boundary. To replicate margin, use the `offset` modifier, as well as the `padding` option in the `preventOverflow` and `flip` modifiers. 
    at Menu (webpack-internal:///./node_modules/@chakra-ui/menu/dist/esm/menu.js:34:5)
    at MethodMenu (webpack-internal:///./src/components/MethodMenu.tsx:29:102)
    at div
    at Styled(div) (webpack-internal:///./node_modules/@emotion/react/dist/emotion-element-4fbd89c5.browser.esm.js:44:73)
    at Stack (webpack-internal:///./node_modules/@chakra-ui/layout/dist/esm/stack.js:54:5)
    at HStack
    at div
    at Styled(div) (webpack-internal:///./node_modules/@emotion/react/dist/emotion-element-4fbd89c5.browser.esm.js:44:73)
    at Flex (webpack-internal:///./node_modules/@chakra-ui/layout/dist/esm/flex.js:25:5)
    at div
    at Styled(div) (webpack-internal:///./node_modules/@emotion/react/dist/emotion-element-4fbd89c5.browser.esm.js:44:73)
    at Container (webpack-internal:///./src/layout/Container.tsx:22:23)
    at div
    at Styled(div) (webpack-internal:///./node_modules/@emotion/react/dist/emotion-element-4fbd89c5.browser.esm.js:44:73)
    at Header (webpack-internal:///./src/layout/Header.tsx:65:102)
    at Layout (webpack-internal:///./src/layout/Layout.tsx:18:23)
    at Index (webpack-internal:///./pages/index.tsx:38:102)
    at WithAuthUserHOC (webpack-internal:///./node_modules/next-firebase-auth/build/index.browser.js:1:8144)
    at ColorModeProvider (webpack-internal:///./node_modules/@chakra-ui/color-mode/dist/esm/color-mode-provider.js:46:5)
    at ThemeProvider (webpack-internal:///./node_modules/@emotion/react/dist/emotion-element-4fbd89c5.browser.esm.js:78:71)
    at ChakraProvider (webpack-internal:///./node_modules/@chakra-ui/react/dist/esm/chakra-provider.js:21:5)
    at exports.StoreProvider (webpack-internal:///./node_modules/easy-peasy/dist/easy-peasy.js:1:16942)
    at MyApp (webpack-internal:///./pages/_app.tsx:40:24)
    at I18nProvider (webpack-internal:///./node_modules/next-translate/lib/esm/I18nProvider.js:29:18)
    at AppWithTranslations (webpack-internal:///./node_modules/next-translate/lib/esm/appWithI18n.js:66:152)
    at ErrorBoundary (webpack-internal:///./node_modules/@next/react-dev-overlay/lib/internal/ErrorBoundary.js:23:47)
    at ReactDevOverlay (webpack-internal:///./node_modules/@next/react-dev-overlay/lib/internal/ReactDevOverlay.js:73:23)
    at Container (webpack-internal:///./node_modules/next/dist/client/index.js:184:5)
    at AppContainer (webpack-internal:///./node_modules/next/dist/client/index.js:672:24)
    at Root (webpack-internal:///./node_modules/next/dist/client/index.js:803:24)

💥 Steps to reproduce

The warning appears when the button (MenuButton) is clicked.

Reproduction

<Menu>
    <MenuButton as={Button} rightIcon={<FaChevronDown />} color="black" colorScheme="primary">
        <Icon as={FaChair} mr={3} />
        <span>first</span>
    </MenuButton>
    <MenuList>
        <MenuOptionGroup defaultValue="first" type="radio">
            <MenuItemOption value="first">
                <Icon as={FaChair} mr={3} />
                <span>first</span>
            </MenuItemOption>
            <MenuItemOption value="second">
                <Icon as={FaChair} mr={3} />
                <span>second</span>
            </MenuItemOption>
            <MenuItemOption value="third">
                <Icon as={FaChair} mr={3} />
                <span>third</span>
            </MenuItemOption>
        </MenuOptionGroup>
    </MenuList>
</Menu>

🧐 Expected behavior

Not having a warning.

🌍 System information

Software	Version(s)
Chakra UI	^1.3.3
Browser	Chrome
Operating System	MacOS

[yotam707]

Also facing the same issue would love some help with this :)

[segunadebayo]

This is a common issue when the menu is wrapped within a Stack-related component. I can confirm this warning goes away when #3583 is merged.

[yotam707]

Can you please re-open - the warning still exists (I'm on version 1.4.1)

[raymclee]

still having this issue with 1.5.1

[dlindenkreuz]

Still the same on 1.6.2

[mindreframer]

Also happening with 1.6.3

[mindreframer]

A temporary workaround: wrap your Menu component in Box, this seems to prevent this warning

<Box>
  <Menu>
    <MenuButton as={Button} colorScheme="blue" variant="ghost" leftIcon={<AiOutlineInbox />} size="sm">
      User
    </MenuButton>
    <MenuList minWidth="240px">
      <MenuItem>Profile</MenuItem>
      <MenuItem>Logout</MenuItem>
    </MenuList>
  </Menu>
</Box>

[mheob]

The issue still occurs in 1.6.5.

But the temporary workaround of @mindreframer works fine.

[aaronmcadam]

I see this issue with v1.6.5 too

[Philzen]

Using 1.8.6 and am sorry to confirm this still seems to be a thing.

Wrapping in a Box or chakra.div works to get rid of the warning.

[sideshowlol]

This remains an issue with 1.8.8.

Wrapping in a Box as suggested by @mindreframer removes the console warning.

[Philzen]

@segunadebayo i feel this issue should be re-opened for the time being as there are multiple confirmations it still exists.

[mheob]

@segunadebayo i feel this issue should be re-opened for the time being as there are multiple confirmations it still exists.

I completely agree with that. Unfortunately, this is still an issue.

[kasem-sm]

Still exists in v2 :/

[dr-skot]

In my experience, wrapping in Box suppresses the warning but changes the appearance. The gap between the menu button and the popup menu disappears.

[renchris]

I'm still experiencing this warning using the Popover component within a Stack component. However, wrapping the parent Stack component with a Box component does not suppress this warning for me.

[hlolli]

Same here with @chakra-ui/react 2.5.5, wrapping Menu in Box doesn't silence the warning

[anouk-shih]

Same issue with @chakra-ui/react": "^2.6.1" when try to use Menu component inside a HStack. Wrapping Menu in Box works well.

[dionjwa]

@dr-skot

In my experience, wrapping in Box suppresses the warning but changes the appearance. The gap between the menu button and the popup menu disappears.

I managed to manipulate (reduce in my case) this gap with <Menu gutter={0}>

[dospore]

Im using @chakra-ui/react": "^2.6.1" as well and confirming the Box wrap removes the errors

[ValiSum]

Im using @chakra-ui/react": "^2.6.1" as well and confirming the Box wrap removes the errors

I also confirm the same! I just wrapped the menu using Box and the warning has disappeared and the appearance is still the same.