[Bug] Navigation Issue: Selected Menu Item Goes Out of View

[apolope]

Version

latest

Reproduction link

https://demos.creative-tim.com/material-dashboard-pro-angular2/#/pages/user

Operating System

none

Device

none

Browser & Version

Chrome, Edge...

Steps to reproduce

When selecting a menu item on a page, the selected menu remains hidden and does not stay highlighted. As a result, users always need to scroll down to locate the selected menu before they can choose the next one. This can make navigation inefficient and frustrating, especially when working with long menus. 1️⃣ Open multiple menu items to extend the overall menu length. 2️⃣ Ensure the menu is long enough so that some items go beyond the visible screen area. 3️⃣ Select a menu item that is out of view (beyond the screen limit). 4️⃣ Observe that the selected menu item remains hidden instead of being highlighted and automatically brought into view. 5️⃣ Users have to manually scroll to locate the selected item before choosing another option.

What is expected?

It is expected that when the selected menu item goes off the page, it should be highlighted and remain visible.

What is actually happening?

angular 15.

---

Solution

To improve the user experience, you could consider using scrollIntoView() or a similar approach to ensure that the selected menu item remains visible when it goes off-screen. This would help users navigate more efficiently without having to manually scroll to find the selected item.

Additional comments

https://github.com/user-attachments/assets/7088799b-79ae-4fdb-acea-2c4c884820e0