Skip to content

[ContextMenu] Error when configuring both text and component on an item #323

@sissbruecker

Description

@sissbruecker

The ContextMenu component causes React rendering errors when it re-renders and one of its items is configured with both a text property and a component property. Worst case this breaks the whole app.

While this configuration (having both text and component for a single item) is not supported, the component should handle this gracefully instead of throwing an error. It should prioritize one property (currently it's text) and ignore the other one. Optionally log a warning to the console indicating the misconfiguration.

Example:

const items = [{ text: 'foo', component: <div>bar</div> }];

export default function ContextMenuPage() {
  const [count, setCount] = useState(0);

  return (
    <ContextMenu
      items={items}
      onItemSelected={() => {
        setCount(count + 1);
      }}
    >
      <div>{count} clicks</div>
    </ContextMenu>
  );
}

Error message:

Uncaught DOMException: Node.removeChild: The node to be removed is not a child of this node
    React 24
    performWorkUntilDeadline scheduler.development.js:45
    js scheduler.development.js:223
    js scheduler.development.js:364
    __require chunk-BUSYA2B4.js:3
    js index.js:6
    __require chunk-BUSYA2B4.js:3
    React 2
    __require chunk-BUSYA2B4.js:3
    js React
    __require chunk-BUSYA2B4.js:3
    <anonymous> react-dom_client.js:18075

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions