如何解决mat-menu内嵌表单输入框聚焦时菜单自动关闭的问题

问题原因 #

Angular Material 的 mat-menu 组件内部默认通过监听 mousedown 事件判断是否触发关闭逻辑，你仅阻止了 click 事件的冒泡，但是 mousedown 事件的触发优先级高于 click 事件，点击 textarea 时 mousedown 会先冒泡到菜单外层的关闭监听器，不等 click 事件触发就已经执行了菜单关闭操作，所以原来的写法不生效。

解决方案 #

直接将原来绑定在 mat-menu 上的 click 事件阻止逻辑替换为 mousedown 事件阻止即可，修改后的代码如下：

<mat-menu #menu="matMenu" xPosition="before" class="filter-menu" (mousedown)="$event.stopPropagation();">
      <div>
          <form [formGroup]="feedbackForm" (submit)="submitFeedback()">
              <div class="form__wrapper mt-4">
                  <div class="flex">
                         <div>
                            <label for="email" class="form__label">Email</label>
                             <input type="email" name="email" disabled 
placeholder="{{email}}" id="">
                          </div>
                  </div>
                  <div>
                       <label for="feedback" class="form__label">Feedback</label>
                         <textarea placeholder="Your feedback" formControlName="feedback" rows="4" name="feedback"></textarea>
                  </div>
                    <button class="btn" type="submit">Send Message</button>
               </div>
           </form>
    </div>
</mat-menu>

如果修改后仍有问题，可以同时保留 click 和 mousedown 两个事件的阻止逻辑，覆盖所有交互场景。

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