bug(tabs / mat-tab-link): No underline in selected tab after fresh application start #25117
Closed
1 task
Assignees
Labels
area: material/tabs
P3
An issue that is relevant to core functions, but does not impede progress. Important, but not urgent
Comments
|
Confirming that I can reproduce by forking the Basic use of the tab nav bar example https://stackblitz.com/edit/jgqdxu--run?file=src/app/tab-nav-bar-basic-example.ts |
zarend
added
P3
crisbeto
added a commit
to crisbeto/material2
that referenced
this issue
Jul 3, 2022
In angular#24000 the ink bar was switched from `requestAnimationFrame` to `NgZone.onStable` in order to avoids timeouts when the browser is in the background. The problem is that if the zone is already stable, it may take some user interaction before it becomes unstable again and emits to `onStable`. These changes wrap the call in `NgZone.run` to guarantee that it'll be unstable. Fixes angular#25117.
crisbeto
added a commit
that referenced
this issue
Jul 12, 2022
In #24000 the ink bar was switched from `requestAnimationFrame` to `NgZone.onStable` in order to avoids timeouts when the browser is in the background. The problem is that if the zone is already stable, it may take some user interaction before it becomes unstable again and emits to `onStable`. These changes wrap the call in `NgZone.run` to guarantee that it'll be unstable. Fixes #25117.
crisbeto
added a commit
that referenced
this issue
Jul 12, 2022
In #24000 the ink bar was switched from `requestAnimationFrame` to `NgZone.onStable` in order to avoids timeouts when the browser is in the background. The problem is that if the zone is already stable, it may take some user interaction before it becomes unstable again and emits to `onStable`. These changes wrap the call in `NgZone.run` to guarantee that it'll be unstable. Fixes #25117. (cherry picked from commit 9d92fbc)
crisbeto
added a commit
that referenced
this issue
Jul 12, 2022
In #24000 the ink bar was switched from `requestAnimationFrame` to `NgZone.onStable` in order to avoids timeouts when the browser is in the background. The problem is that if the zone is already stable, it may take some user interaction before it becomes unstable again and emits to `onStable`. These changes wrap the call in `NgZone.run` to guarantee that it'll be unstable. Fixes #25117. (cherry picked from commit 9d92fbc)
|
This issue has been automatically locked due to inactivity. Read more about our automatic conversation locking policy. This action has been performed automatically by a bot. |
Sign up for free
to subscribe to this conversation on GitHub.
Already have an account?
Sign in.
Is this a regression?
The previous version in which this bug was not present was
No response
Description
Angular app with mat-tab-nav-bar and mat-tab-link
Then we run our angular application (fresh start/ initial load/ refresh page), even we have correctly selected activeLink we cannot see underline under selected tab.
Even using _alignInkBarToSelectedTab() and realignInkBar() did not help.
The problem is visible in example stackBlitz for component.
Reproduction
Steps to reproduce:
As I said, the problem is visible in example stackBlitz for component.
Go here:
https://material.angular.io/components/tabs/examples
Scroll to a very bottom of the page (Basic use of the tab nav bar),
Click icon to "Edit this example in StackBlitz"
Click the button and go here (or just follow the link):
https://stackblitz.com/run?file=src%2Fapp%2Ftab-nav-bar-basic-example.ts
Let application load and just look at output.
There is no underline under 1st tab.
But, when we click the second tab we will see animation (underline going from 1st to 2nd tab) and underline is visible under 2nd tab.
Expected Behavior
On initial load, we should be able to see underline in the selected tab.
Actual Behavior
On initial load, there is no underline in tab link component.
Environment
// All can be check in stackBlitz example
The text was updated successfully, but these errors were encountered: