使用@atlaskit/dropdown-menu打开下拉时触发popper.js偏移格式警告求助

Hey there, I’ve run into this exact warning before with Atlaskit components—let’s break down how to fix it:

Why this warning happens #

Popper.js (or its modern successor @popperjs/core) deprecated using whitespace to separate offset values (like 10 20) in favor of commas (10, 20) or array syntax ([10, 20]). The @atlaskit/dropdown-menu package is likely using an internal Popper configuration that still relies on the old whitespace-separated format, triggering the warning when you open the menu.

Solutions to try #

1. Check your own offset props first #

If you’re manually passing an offset value to the DropdownMenu component (like offset="10 20"), update it to use comma separation or an array—this is the quickest fix if the issue comes from your code:

// Bad (triggers warning)
<DropdownMenu offset="10 20">...</DropdownMenu>

// Good (comma-separated string)
<DropdownMenu offset="10, 20">...</DropdownMenu>

// Even better (array format, recommended by Popper)
<DropdownMenu offset={[10, 20]}>...</DropdownMenu>

2. Upgrade @atlaskit/dropdown-menu to the latest version #

Atlassian might have already patched this warning in a newer release. Run the appropriate command for your package manager to update:

# For npm
npm update @atlaskit/dropdown-menu

# For yarn
yarn upgrade @atlaskit/dropdown-menu

3. Override Popper’s modifier configuration #

If upgrading doesn’t resolve the issue, you can directly override the internal Popper offset modifier via the popperProps prop to enforce the correct format:

import DropdownMenu from '@atlaskit/dropdown-menu';

function MyCustomDropdown() {
  return (
    <DropdownMenu
      popperProps={{
        modifiers: [
          {
            name: 'offset',
            options: {
              // Replace the old whitespace format with an array
              offset: [0, 8], // Adjust these values to match your menu’s positioning needs
            },
          },
        ],
      }}
      trigger="Open Menu"
    >
      {/* Your menu items go here */}
    </DropdownMenu>
  );
}

4. Temporary: Filter the warning (not ideal, but for emergencies) #

If you need to hide the warning while working on a more permanent fix, you can add a filter in your app’s entry file (like index.js or App.js):

if (process.env.NODE_ENV === 'development') {
  const originalWarn = console.warn;
  console.warn = (...args) => {
    // Skip the specific Popper offset warning
    if (!args[0]?.includes('Offsets separated by white space(s) are deprecated')) {
      originalWarn.apply(console, args);
    }
  };
}

内容的提问来源于stack exchange，提问作者Eduardo Hernández