Skip to content

navbar-vertical: active/focus state is not updated correctly when switching items #1511

@dauriamarco

Description

@dauriamarco

Prerequisites

  • I have read the Contributing Guidelines.
  • I have not leaked any internal/restricted information like screenshots, videos, code snippets, links etc.

Affected component

<si-navbar-vertical>

Summary

In collapsed mode, when a group flyout is open and another navigation item is clicked, the active state is not updated correctly. As a result, two items can appear active at the same time.

Additionally, focus is always returned to the original group trigger when the flyout closes, which can cause the tooltip to appear in an incorrect position.

Version

No response

Steps to reproduce

  1. Use the navbar in collapsed mode.
  2. Set one navigation group to an active state.
  3. Open the group flyout.
  4. Click on a different navigation item (outside the open group).

Code reproduction example

https://element.siemens.io/element-examples/#/overview/si-navbar-vertical/si-navbar-vertical?q=navbar

What is the current bug behavior

  • The previously active item remains visually active.
  • The newly clicked item also becomes active.
  • Two items are shown as active at the same time.
  • When the flyout closes, focus always returns to the original group triggering the tooltip in an incorrect position.

What is the expected correct behavior

  • Only one navigation item should have the active state at any time.
  • When clicking a different item, the previous active state should be cleared.
  • Focus should be managed correctly and not always return to the group trigger.
  • Tooltips should not appear incorrectly when closing a flyout.

Metadata

Metadata

Assignees

Labels

No labels
No labels

Type

Projects

No projects

Relationships

None yet

Development

No branches or pull requests

Issue actions