bug(slide-toggle): Clicking on mat-slide-toggle element does not toggles the input, but sets :active pseudo selector visually indicating a click

[Totati]

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

Slide toggle toggles it's value on button or label click only, but because of the .mat-mdc-slide-toggle:active .mdc-switch:not(.mdc-switch--disabled) .mdc-switch__handle selector clicking on the "container" of the button and label triggers visual press on the element.

Reproduction

StackBlitz link
Steps to reproduce:

1. Click on the pink area
2. The handle size changes without toggling the button.

Expected Behavior

It should toggle the button or do not trigger the size change.

Actual Behavior

It triggers the size change.

Environment

Angular CLI: 18.0.2
Node: 18.20.3
Package Manager: yarn 1.22.19
OS: linux x64

Angular: 18.0.1
... animations, common, compiler, compiler-cli, core, forms
... localize, platform-browser, platform-browser-dynamic, router

Package Version

@angular-devkit/architect 0.1800.2
@angular-devkit/build-angular 18.0.2
@angular-devkit/core 18.0.2
@angular-devkit/schematics 18.0.2
@angular/cdk 18.1.2
@angular/cli 18.0.2
@angular/material 18.1.2
@angular/material-experimental 18.1.2
@angular/material-moment-adapter 18.1.2
@schematics/angular 18.0.2
rxjs 7.4.0
typescript 5.4.5
zone.js 0.14.6

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}