点击SVG清除按钮时MatFormField失焦导致功能失效问题

我来帮你搞定这个问题！你遇到的核心痛点是：点击SVG清除按钮时，MatFormField会失去焦点，导致按钮立刻隐藏，还没来得及完成清空操作。咱们可以通过几个简单的调整来修复这个问题：

核心思路 #

问题的根源是：SVG默认是不可聚焦元素，点击它时浏览器会把焦点从输入框移走，MatFormField失去:focus-within状态，导致按钮隐藏。我们需要做两件事：

1. 点击按钮时，手动让输入框重新聚焦，维持按钮的显示状态
2. 阻止点击事件的传播，避免触发MatFormField的失焦逻辑

完整解决方案 #

1. 调整模板代码 #

给输入框添加模板引用变量，同时优化点击事件的处理：

<mat-form-field>
  <div class="displayFlex">
    <!-- 添加#inputField模板引用，方便后续聚焦操作 -->
    <input 
      #inputField 
      type="text" 
      matInput 
      [placeholder]="controlName" 
      formControlName="control"
    >
    <svg 
      class="clear" 
      (click)="clearInput(inputField, 'control')" 
      fill="#000000" 
      height="17" 
      viewBox="0 0 24 24" 
      width="17" 
      xmlns="http://www.w3.org/2000/svg"
    >
      <path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"/>
      <path d="M0 0h24v24H0z" fill="none"/>
    </svg>
  </div>
</mat-form-field>

2. 组件逻辑处理 #

在组件类中实现clearInput方法，清空值后手动聚焦输入框，并阻止事件传播：

import { Component } from '@angular/core';
import { FormGroup, FormControl } from '@angular/forms';

@Component({
  selector: 'app-clear-input-example',
  templateUrl: './clear-input-example.component.html',
  styleUrls: ['./clear-input-example.component.css']
})
export class ClearInputExampleComponent {
  // 示例FormGroup，根据你的实际情况调整
  form = new FormGroup({
    control: new FormControl('')
  });

  clearInput(inputElement: HTMLInputElement, controlKey: string): void {
    // 清空对应FormControl的值
    this.form.get(controlKey)?.setValue('');
    // 手动让输入框重新聚焦，维持按钮显示
    inputElement.focus();
    // 阻止事件传播，避免触发MatFormField的失焦逻辑
    event.stopPropagation();
  }
}

3. CSS样式优化 #

使用:focus-within伪类控制按钮显示，同时建议只有输入框有值时才显示按钮，更符合用户体验：

.displayFlex {
  position: relative;
}

.clear {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  cursor: pointer;
  /* 默认隐藏按钮 */
  display: none;
}

/* 只有MatFormField聚焦且输入框非空时，显示清除按钮 */
.mat-form-field:focus-within input:not(:placeholder-shown) + .clear {
  display: block;
}

额外优化（可选） #

如果你的项目中允许，可以给SVG添加tabindex="0"让它变成可聚焦元素，这样点击时焦点会留在SVG上，MatFormField的:focus-within状态依然保持，不过上面的方案已经足够解决问题了。

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