Internal issue 2905 - Side Navigation Expandable Chevrons Disappearing

[ticket-sync[bot]]

When implementing the ICDS Side Navigation component, the arrow/chevron icon added to the IcNavigationItem using the “expandable” prop is disappearing.

The implementation we are using takes a config that includes a main menu and multiple sub-menus. Initially we map IcNavigationItem’s to the main menu config. For menu items that contain sub-menus we set “expandable” to true, and on click we change the mapping of IcNavigationItem’s to the selected submenu’s config. This allows us to create drill-down menus.

However, we see that when clicking into a submenu and then returning to the main menu config, the expandable arrows/chevrons have disappeared, even though the expandable prop is still set to true.

The behaviour is quite erratic, sometimes all chevrons are removed, sometimes only one or two.

Inspecting the HTML, we can see that the ic-navigation-item element is having the “{{navigation-item-side-nav-collapsed}} “ class applied when we change the menu config, this seems to set the icons svg element display value to “none” (also the tooltips become enabled).

[GCHQ-Developer-847]

Just wanted to stress that it's important to keep this ticket in PI 9 V2 and not push it to the next one. The team needing this fix have a feature which they want to be completed this quarter, and if this issue isn't fixed before then it could cause problems for them