bug(tabs / mat-tab-group): Open dialog with component mat-tab-group and fast change mat-tab (click another mat-tab) and empty content
- 主要语言
- TypeScript
- 星标
- 25k
- 派生
- 6.8k
- 平均合并
- 1 天 8 小时
- 30 天内合并 PR
- 91
描述
### 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
If I open a dialog in which I have a mat-tab-group component and quickly click on another tab (another mat-tab), the content of the newly opened tab is not rendered - it remains empty. It looks right in DOM.
There are several ways to quickly change a tab:
1. By touch
2. Click the mouse
3. By entering the click command in the console: document.evaluate('//html[1]/body[1]/div[1]/div[2]/div[1]/mat-dialog-container[1]/dialog-data-example-dialog[1]/div[1]/mat-tab-group[1]/mat-tab-header[1]/div[1]/div[1]/div[1]/div[2]', document, null, XPathResult.FIRST_ORDERED_NODE_TYPE, null).singleNodeValue.click()
Fast click on tab after dialog open - bug

Slow click on tab after dialog open - correct

### Reproduction
Steps to reproduce:
1. https://stackblitz.com/edit/angular-k1g4u3-pmsayf
### Expected Behavior
Correctly loaded content of the newly selected tab
### Actual Behavior
The empty content of the newly selected tab
### Environment
- Angular: 14.0.0
- CDK/Material: 14.0.4
- Browser(s): Google Chrome 103.0.5060.66
- Operating System (e.g. Windows, macOS, Ubuntu): Windows
贡献指南
调研方向
从链接的 StackBlitz 复现开始,测试包含 mat-tab-group 的 mat-dialog-container,包括快速切换到另一个 mat-tab。在对话框打开期间跟踪选项卡的渲染行为;完成标准是,新选中的选项卡在触摸、鼠标和脚本点击下都能稳定显示其内容。
由索引模型根据 Issue 内容生成。
评估
- 技术栈
- angular, typescript
- 领域
- frontend
- Issue 类型
- 缺陷
- 难度
- 3/5
- 预计耗时
- 1-2 天
- 活跃度
- 停滞
- 描述清晰度
- 基本清楚
- 新手友好度
- 35/100