fix(row-action-menu): avoid duplicate key 'edit' when consumer supplies custom action

[robot-boi]

Summary

Prevents React key collisions in MRT_RowActionMenu when a consumer supplies a custom action with key="edit" while enableEditing also injects the built-in Edit action. If a custom "edit" exists, the built-in one is skipped.

Problem

When enableEditing is on (with editDisplayMode of "modal" or "row"), MRT_RowActionMenu adds an Edit action with key="edit". If the consumer also returns an item with key="edit" from renderRowActionMenuItems, React warns and may misbehave:

Encountered two children with the same key, .$edit. Keys should be unique so that components maintain their identity across updates.

Reproduction (before)

<MRT_Table
  enableEditing
  editDisplayMode="row"
  renderRowActionMenuItems={({ row }) => [
    // custom "edit" action supplied by consumer
    <MRT_ActionMenuItem key="edit" label="Edit" onClick={() => { /* ... */ }} />
  ]}
/>

Result: React duplicate key warning and potentially duplicated/omitted children.

Fix (after)

Before creating the built-in Edit action, check the items returned by renderRowActionMenuItems for an element with key === 'edit'. If present, do not add the internal Edit action.

const rowActionMenuItems = renderRowActionMenuItems?.({...});

const hasEditItem = rowActionMenuItems?.some(
  (item) => isValidElement(item) && item.key === 'edit',
);

const editItem =
  !hasEditItem &&
  parseFromValuesOrFunc(enableEditing, row) &&
  ['modal', 'row'].includes(editDisplayMode!) && (
    <MRT_ActionMenuItem
      key="edit"
      icon={<EditIcon />}
      label={localization.edit}
      onClick={handleEdit}
      table={table}
    />
  );

if (editItem) items.push(editItem);
if (rowActionMenuItems?.length) items.push(...rowActionMenuItems);

Impact

• No breaking changes.
• Keeps current behavior when no custom "edit" is provided.
• Eliminates duplicate key warnings; only one “Edit” action is rendered.
• O(n) check over rowActionMenuItems; negligible overhead.

Manual Verification

1. Enable editing with editDisplayMode="row" or "modal".

2. Return a custom action with key="edit" from renderRowActionMenuItems.

3. Confirm:

   • No React key warning.
   • Menu shows a single Edit action (either custom or built-in, not both).

4. Remove the custom "edit" action and confirm the built-in Edit still renders as before.

Notes

• Uses isValidElement to safely access .key on ReactNodes.
• No changes to public API or docs required.

Checklist

• Build passes locally
• Change scoped to MRT_RowActionMenu
• Backwards compatible

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Preview	Comments	Updated (UTC)
material-react-table	Ready	Preview	Comment	Aug 27, 2025 1:26am
material-react-table-storybook	Ready	Preview	Comment	Aug 27, 2025 1:26am