angular / angular/components

bug(mat-stepper): Stepper in the linear mode has unclear hover behavior

Open
#31,788 1 comment 2 reactions 1 assignee Claimed by @adolgachev View on GitHub
area: material/stepper P4
Dominant language
TypeScript
Stars
25k
Forks
6.8k
Avg merge
1d 8h
Merged PRs (30d)
91

Description

### Is this a regression?

- [x] Yes, this behavior used to work in the previous version

### The previous version in which this bug was not present was

11.2.12

### Description

Seems that hover styling is unclear once stepper is run in the linear mode. I noticed that problems started from versions higher then v11.

### Reproduction

Steps to reproduce:
1. Open latest documentation of the stepper: https://material.angular.dev/components/stepper/overview
(at the time of writing, it's v20.2.0)
2. Take a look at the first example

Image

3. Click 'Enable linear mode'
4. Write 'sample text' in the field of the first step
5. Switch to the second step (don't fill required field)
6. Switch back to the first step

### Expected Behavior

The second step displays hover effect (as it was in v11):

https://github.com/user-attachments/assets/e95cbe8f-7f38-4959-8c95-cd8b66b88477

### Actual Behavior

The second step doesn't display hover effect:

https://github.com/user-attachments/assets/f4b4a473-e820-4230-a4a9-fb4172389aa3

### Environment

- Angular: -
- CDK/Material: Material v20.2.0
- Browser(s): Chrome, Firefox
- Operating System (e.g. Windows, macOS, Ubuntu): mocOS, Windows

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.