Skip to content

bug(TabNavBar): mat-tab-link gets selected only once #30036

Closed
@Max638

Description

@Max638

Is this a regression?

  • Yes, this behavior used to work in the previous version

The previous version in which this bug was not present was

No response

Description

When using the mat-tab-nav-bar with a single mat-tab-link, there is a problem when the value of the active property gets toggled two or more times. To be more specific, when the component is loaded, the ink bar is visible as the "active" property is "true". After toggling, the "active" property value is "false" and the ink bar is no longer visible. The problem comes when the "active" property value toggles to "true" again but the ink bar is no longer visible.

Reproduction

StackBlitz link: https://stackblitz.com/edit/mky45h?file=src%2Fexample%2Ftab-nav-bar-basic-example.ts
Steps to reproduce:

  1. Access to the link where the property active of the mat-tab-link is toggled every 3 seconds.
  2. After waiting 3 seconds, the "active" property value will be "false" and ink bar will dissapear. That is OK.
  3. After waiting 6 seconds, the "active" property value will be "true" but the ink bar will no longer be visible again. From this point, the ink bar will never be visible again regardless of the value of the "this.active" attribute.

Expected Behavior

It is expected that:

  1. When the active property of the mat-tab-link is true, then the ink bar should always be displayed.
  2. When the active property of the mat-tab-link is false, then the ink bar should never be displayed.

Actual Behavior

  1. When the active property of the mat-tab-link is true, then the ink bar is only displayed if the component has just been loaded. Otherwise, if the "active" property was previously "false" but it got toggled to "true", then the ink bar will not be visible.
  2. When the active property of the mat-tab-link is false, then the ink bar is never displayed.

Environment

  • Angular: ^19.0.0-next.2
  • CDK/Material: ^19.0.0-next.2
  • Browser(s): Chrome
  • Operating System (e.g. Windows, macOS, Ubuntu): Ubuntu

Metadata

Metadata

Assignees

Labels

P3An issue that is relevant to core functions, but does not impede progress. Important, but not urgentarea: material/tabs

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions