bug(RadioButton): Radio button group adds scroll when used in MatTab component
- Dominant language
- TypeScript
- Stars
- 25k
- Forks
- 6.8k
- Avg merge
- 1d 8h
- Merged PRs (30d)
- 91
Description
### 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 the `mat-radio-group` component is placed inside the `mat-tab` component it adds unnecessary scroll when any other content doesn't
But can be fixed by using `mat-tab-group dynamicHeight`
### Reproduction
StackBlitz link: [Link](https://stackblitz.com/edit/d9acy1?file=src%2Fexample%2Ftab-group-animations-example.html)
Steps to reproduce:
1. Use `mat-tab-group` and `mat-tab`
2. Use `mat-radion-group` and `mat-radio-button` and place inside the `mat-tab`
3. Notice scroll bar
4. Add `dynamicHeight` attribute to the `mat-tab-group`
5. Notice the scroll bar is gone
### Expected Behavior
The scroll bar should not appear when mat-radio-group is placed inside the mat-tab
### Actual Behavior
mat-radio-button-group adds scroll when used in mat-tab component
### Environment
- Angular: "@angular/core": "^17.3.0",
- CDK/Material: "@angular/material": "18.0.0",
- Browser(s): Chrome
- Operating System: macOS
Contributor guide
Research direction
Start with the linked StackBlitz reproduction using mat-tab-group, mat-tab, mat-radio-group, and mat-radio-button, first without dynamicHeight and then with it. Trace the tab and radio layout behavior, then add a regression test covering the reported combination. Done means the unnecessary scrollbar no longer appears without requiring dynamicHeight.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- angular, typescript
- Domain
- frontend
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 42/100