Skip to content

EuiContextMenuPanel with EuiLink dom validation error #3679

@walterra

Description

@walterra

The docs for EuiBasicTable show two ways of adding actions in the "Adding actions table" section: One with config objects and one with passing a render function that includes EuiLink to create the button. The example with config objects has 5 actions which will get rendered in the popover menu. The example with EuiLink has 2 actions which will get rendered inline in the table.

Now the issue we're facing is: If there are 3 custom actions with render functions based on the EuiLink approach, as expected, they'd get rendered in the popover menu too. But then we'll get a React/DOM error because the popover menu renders nested buttons: One as part the popover menu (without a click event) and a nested one because EuiLink used with onClick gets rendered as a button. (This is similar to the problem described in #1428, I guess the difference there was without more complex logic to render the buttons they could move to use the config object approach)

Here are some more thoughts/suggestions what I can think of how we could solve this:

  • The config objects could allow both render and onClick (to do a custom inner rendering without a button and pass the click event to the config object)
  • An alternative could be to allow the name attribute of the config object to be something like name: string | ReactElement | (item: T, enabled: boolean) => ReactElement; instead of just name: string;

Metadata

Metadata

Assignees

Labels

No labels
No labels

Type

No type
No fields configured for issues without a type.

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions