Angular Material mat-form-field 点击事件stopPropagation失效

问题现象 #

• <mat-form-field>的<mat-label>内放置的mat-radio-button无法正常点击选中
• 点击mat-form-field任意区域时，点击事件会透传至内部的mat-select，自动触发下拉面板展开
• 直接在<mat-form-field>标签上绑定(click)=$event.stopPropagation()阻止事件冒泡的方案无效
  

复现代码 #

<mat-form-field floatLabel="always">
    <mat-label>
       <div fxLayout="row" fxLayoutAlign="start center">
         <span>Title</span>
         <mat-radio-group [(ngModel)]="groupSelection" name="groupSelection">
           <mat-radio-button value="option A">
              Option A
           </mat-radio-button>
           <mat-radio-button  value="option B">
              Option B
           </mat-radio-button>
        </mat-radio-group>
      </div>
   </mat-label>
   <mat-select [(ngModel)]="optionSelection">
      <mat-option *ngFor="let option of options" [value]="optionVal">
          {{option}}
      </mat-option>
   </mat-select>
</mat-form-field>

在线复现Demo地址

解决方法 #

问题根源：mat-form-field组件内置了默认交互规则：点击标签区域会自动激活内部绑定的表单控件（本场景下就是mat-select），该逻辑在事件捕获阶段执行，直接在<mat-form-field>根节点阻止事件冒泡无法拦截到这层内置处理。
按以下两步修改即可修复：

1. 在<mat-label>内包裹交互元素的容器上，同时阻止事件冒泡和默认行为，拦截事件避免触发mat-form-field的内置点击逻辑：

<!-- 在包裹单选组的div上绑定事件拦截 -->
<div 
  fxLayout="row" 
  fxLayoutAlign="start center"
  (click)="$event.stopPropagation(); $event.preventDefault()"
>
  <span>Title</span>
  <mat-radio-group 
    class="select-label-radio"
    [(ngModel)]="groupSelection" 
    name="groupSelection"
  >
    <mat-radio-button value="option A">Option A</mat-radio-button>
    <mat-radio-button value="option B">Option B</mat-radio-button>
  </mat-radio-group>
</div>

2. 给单选按钮组添加自定义样式，提升层级避免被表单字段的交互层遮挡：

.select-label-radio {
  position: relative;
  z-index: 10;
  margin-left: 12px; /* 可根据布局需求调整和标题的间距 */
}

修改后单选按钮可正常点击选中，点击单选区域不会再触发mat-select下拉面板自动展开。

内容的提问来源于stack exchange，提问作者Dinesh