Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
1 task
Max638 opened this issue Nov 18, 2024 · 0 comments
Open
1 task

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

Max638 opened this issue Nov 18, 2024 · 0 comments
Labels
needs triage This issue needs to be triaged by the team

Comments

@Max638
Copy link

Max638 commented Nov 18, 2024

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
@Max638 Max638 added the needs triage This issue needs to be triaged by the team label Nov 18, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
needs triage This issue needs to be triaged by the team
Projects
None yet
Development

No branches or pull requests

1 participant