`React does not recognize the `isCollapsible` prop on a DOM element` error

[PhilippeOberti]

Describe the bug The error appears in the console React does not recognize theisCollapsibleprop on a DOM element.

Impact and severity No user impact and probably very low priority, though should be a straightforward error the fix.

Environment and versions

• EUI version: 97.3.0
• React version: ^17.0.2
• Kibana version (if applicable): this is happening on Kibana main branch currently (at the time of the creation of this ticket), so 8.16
• Browser: Chrome
• Operating System: MacOS

To Reproduce Steps to reproduce the behavior:

1. Enable the space-specific Security navigation (Manage spaces => Default => Select solution view => Security)
2. Navigate to any page with the Security Solution application

Changing the navigation back to Classic makes the error go away.

Expected behavior The console error should not be thrown.

Screenshots

Additional context I tried looking at some of the EUI components that could have been at fault here:

• EuiAccordion https://github.com/elastic/eui/blob/main/packages/eui/src/components/accordion/accordion.tsx
• EuiCollapsibleNavBeta https://github.com/elastic/eui/blob/main/packages/eui/src/components/collapsible_nav_beta/collapsible_nav_beta.tsx
• and a few other collapsible nav related components I have a feeling this is related to the EuiCollapsibleNavBeta as it seems to only happen in the space-specific navigation, but I could be totally off!

[cee-chen]

Likely an issue with EuiCollapsibleNavBeta if switching to Classic fixes the problem. May also be an issue with Kibana's implementation of EuiCollapsibleNavBeta

[cee-chen]

After taking a closer look, this is almost certainly an issue in Kibana itself / with the Shared UX implementation of serverless nav, not in the underlying EUI components. Can you transfer this issue to the Kibana repo? cc @sebelga @tsullivan

From what I can tell from the the stacktrace posted, it indicates that an isCollapsible key is getting passed to the accordionProps object which means it needs to be extracted from accordionProps before the rest of the spread is passed down to the component.

That issue is likely here: https://github.com/elastic/kibana/blob/a3289e440ad88825b1ae17495caf13ef5720ae7c/packages/shared-ux/chrome/navigation/src/ui/hooks/use_accordion_state.ts#L110

[sebelga]

I'll look into it 👍

[elasticmachine]

Pinging @elastic/appex-sharedux (Team:SharedUX)