Bug fix on accordion active item (#276)

Signed-off-by: Anna Xiong <[email protected]>
Co-authored-by: pre-commit-ci[bot] <66853113+pre-commit-ci[bot]@users.noreply.github.com>
Co-authored-by: Anna Xiong <[email protected]>
Co-authored-by: Li Nguyen <[email protected]>
Co-authored-by: petar-qb <[email protected]>
Co-authored-by: Antony Milne <[email protected]>
Co-authored-by: Maximilian Schulz <[email protected]>
Co-authored-by: huong-li-nguyen <[email protected]>
Co-authored-by: Alexey Snigir <[email protected]>

vizro-core/changelog.d/20240123_103311_nadija_ratkusic_graca_accordion_active_item.md

@@ -0,0 +1,47 @@
+<!--
+A new scriv changelog fragment.
+
+Uncomment the section that is right (remove the HTML comment wrapper).
+-->
+
+<!--
+### Highlights ✨
+
+- A bullet item for the Highlights ✨ category with a link to the relevant PR at the end of your entry, e.g. Enable feature XXX ([#1](https://github.com/mckinsey/vizro/pull/1))
+
+-->
+<!--
+### Removed
+
+- A bullet item for the Removed category with a link to the relevant PR at the end of your entry, e.g. Enable feature XXX ([#1](https://github.com/mckinsey/vizro/pull/1))
+
+-->
+<!--
+### Added
+
+- A bullet item for the Added category with a link to the relevant PR at the end of your entry, e.g. Enable feature XXX ([#1](https://github.com/mckinsey/vizro/pull/1))
+
+-->
+<!--
+### Changed
+
+- A bullet item for the Changed category with a link to the relevant PR at the end of your entry, e.g. Enable feature XXX ([#1](https://github.com/mckinsey/vizro/pull/1))
+
+-->
+<!--
+### Deprecated
+
+- A bullet item for the Deprecated category with a link to the relevant PR at the end of your entry, e.g. Enable feature XXX ([#1](https://github.com/mckinsey/vizro/pull/1))
+
+-->
+
+### Fixed
+
+- Fix bug on accordion group not opening properly when re-directing to active page via navigation card or URL path. ([#276](https://github.com/mckinsey/vizro/pull/276))
+
+<!--
+### Security
+
+- A bullet item for the Security category with a link to the relevant PR at the end of your entry, e.g. Enable feature XXX ([#1](https://github.com/mckinsey/vizro/pull/1))
+
+-->

vizro-core/src/vizro/models/_navigation/accordion.py

@@ -53,9 +53,14 @@ def build(self, *, active_page_id=None):
                     children=accordion_buttons,
                     title=page_group.upper(),
                     class_name="accordion-item-header",
+                    item_id=page_group,
                 )
             )
 
+        active_item = next(
+            (page_group for page_group, page_members in self.pages.items() if active_page_id in page_members), None
+        )
+
         return html.Div(
             children=[
                 dbc.Accordion(
@@ -65,6 +70,7 @@ def build(self, *, active_page_id=None):
                     persistence=True,
                     persistence_type="session",
                     always_open=True,
+                    active_item=active_item,
                 ),
             ],
             id="nav-panel",

vizro-core/tests/unit/vizro/models/_navigation/test_accordion.py

@@ -68,8 +68,10 @@ class TestAccordionBuild:
                             dbc.Button(children=["Page 2"], active=False, href="/page-2", key="/page-2"),
                         ],
                         title="GROUP",
+                        item_id="Group",
                     )
                 ],
+                active_item="Group",
                 **common_args,
             ),
         ),
@@ -82,14 +84,17 @@ class TestAccordionBuild:
                             dbc.Button(children=["Page 1"], active=True, href="/", key="/"),
                         ],
                         title="GROUP 1",
+                        item_id="Group 1",
                     ),
                     dbc.AccordionItem(
                         children=[
                             dbc.Button(children=["Page 2"], active=False, href="/page-2", key="/page-2"),
                         ],
                         title="GROUP 2",
+                        item_id="Group 2",
                     ),
                 ],
+                active_item="Group 1",
                 **common_args,
             ),
         ),
@@ -103,8 +108,10 @@ class TestAccordionBuild:
                             dbc.Button(children=["Page 2"], active=False, href="/page-2", key="/page-2"),
                         ],
                         title=ACCORDION_DEFAULT_TITLE,
+                        item_id="SELECT PAGE",
                     ),
                 ],
+                active_item="SELECT PAGE",
                 **common_args,
             ),
         ),