Dropdown not working as

Atlassian Ecosystem Design
,
1

When trying to use DropdownMenu in a NextJS Application, following step by step scenarios happen,

  1. After clicking the menu. Menu items are sometimes opened in the corner of the screen. Sometimes nothing happens.
  2. Menu button stays on the clicked state and when i re-click the menu button or somewhere in the screen following error prompts,

Code

import React from 'react';

import DropdownMenu, { DropdownItem, DropdownItemGroup } from '@atlaskit/dropdown-menu';

const DropdownMenuDefaultExample = () => {
  return (
    <DropdownMenu trigger="Page actions">
      <DropdownItemGroup>
        <DropdownItem>Edit</DropdownItem>
        <DropdownItem>Share</DropdownItem>
        <DropdownItem>Move</DropdownItem>
        <DropdownItem>Clone</DropdownItem>
        <DropdownItem>Delete</DropdownItem>
        <DropdownItem>Report</DropdownItem>
      </DropdownItemGroup>
    </DropdownMenu>
  );
};

export default DropdownMenuDefaultExample;

Error

Unhandled Runtime Error
NotFoundError: Failed to execute 'removeChild' on 'Node': The node to be removed is not a child of this node.

Call Stack
removePortalContainer
node_modules/@atlaskit/portal/dist/esm/internal/utils/portal-dom-utils.js (51:0)
eval
node_modules/@atlaskit/portal/dist/esm/internal/components/internal-portal.js (17:27)
safelyCallDestroy
node_modules/react-dom/cjs/react-dom.development.js (22932:0)
commitHookEffectListUnmount
node_modules/react-dom/cjs/react-dom.development.js (23100:0)
commitPassiveUnmountInsideDeletedTreeOnFiber
node_modules/react-dom/cjs/react-dom.development.js (25098:0)
commitPassiveUnmountEffectsInsideOfDeletedTree_begin
node_modules/react-dom/cjs/react-dom.development.js (25048:0)
commitPassiveUnmountEffects_begin
node_modules/react-dom/cjs/react-dom.development.js (24956:0)
commitPassiveUnmountEffects
node_modules/react-dom/cjs/react-dom.development.js (24941:0)
flushPassiveEffectsImpl
node_modules/react-dom/cjs/react-dom.development.js (27038:0)
flushPassiveEffects
node_modules/react-dom/cjs/react-dom.development.js (26984:0)
commitRootImpl
node_modules/react-dom/cjs/react-dom.development.js (26935:0)
commitRoot
node_modules/react-dom/cjs/react-dom.development.js (26682:0)
performSyncWorkOnRoot
node_modules/react-dom/cjs/react-dom.development.js (26117:0)
flushSyncCallbacks
node_modules/react-dom/cjs/react-dom.development.js (12042:0)
eval
node_modules/react-dom/cjs/react-dom.development.js (25651:0)

Thanks in advance for any of your support.

1 Like
2

Hi, @YohanEdiriweera - thanks for bringing this issue to our attention.

I’m looking at our current servicing backlog and I don’t see this as an existing issue already.
Is there any chance you could provide more detailed steps to reproduce so we can properly troubleshoot the underlying issue?

Ideally if you could start from a https://codesandbox.io/ link (they have a template for Next.JS, I believe) where we can reproduce the issue consistently then much easier to isolate the issue and find out what is going on.

Cheers,
Klaus

3

I’ve run into the same issue. It looks this could be fixed by disabling react strict mode (removing the <React.StrictMode> in the entrypoint of the react app).

4 Likes