Angular mat-menu内key.enter事件不生效、输入框点击消失问题咨询

回车事件无法触发minValue方法的修复 #

• 先排查表单默认提交拦截问题：如果<input matInput>包裹在原生<form>或者Angular表单标签内，浏览器默认会在输入框聚焦时按回车触发表单提交动作，默认提交行为会中断事件冒泡，导致绑定的(keyup.enter)/(keydown.enter)回调无法执行。直接给表单标签添加(ngSubmit)="$event.preventDefault()"阻止默认提交行为即可。
• 调整事件绑定写法：优先使用keydown.enter绑定，同时在事件回调内阻止默认行为，参考代码：

<!-- 组件模板代码 -->
<input
  matInput
  type="number"
  min="0"
  placeholder="0"
  (keydown.enter)="minValue($event)"
/>

// 组件ts代码
minValue(event: KeyboardEvent) {
  // 阻止输入框默认回车行为
  event.preventDefault();
  // *注意：type="number"的输入框返回值默认是字符串，需手动转数值
  const val = Number((event.target as HTMLInputElement).value);
  // 执行业务逻辑
}

• 排查事件冒泡拦截：检查输入框的父级节点有没有绑定keydown/keyup事件，且回调内调用了$event.stopPropagation()，这类写法会阻断Angular对enter按键事件的监听，移除对应逻辑即可。

点击输入框直接消失的问题排查 #

该异常和MatInput组件本身无关，属于显示控制逻辑错误，按以下优先级排查：

• 检查输入框本身、以及包裹它的mat-form-field容器上绑定的*ngIf/[hidden]显示条件，确认绑定的布尔变量是否在输入框触发click/focus事件时被意外修改为false。
• 如果实现了「点击页面其他区域隐藏输入框」的交互，问题基本是事件冒泡导致的：点击输入框时点击事件会冒泡到绑定了全局点击监听的节点（比如document、外层容器），直接触发隐藏逻辑。修复方式是给输入框添加(click)="$event.stopPropagation()"，阻止点击事件冒泡到外层监听节点。
• 检查是否给输入框误绑定了会触发隐藏的事件回调，比如把focus事件的回调写成了隐藏输入框的逻辑。

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