防止在表单输入焦点上关闭 mat-menu

Question

我在 mat-menu 中有一个反馈表，如下所示：

<mat-menu #menu="matMenu" xPosition="before" class="filter-menu" (click)="$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>

我添加了$event.stopPropagation(); 以防止在我单击其中时菜单关闭，但当我专注于文本区域时它仍然关闭。有关可能导致此问题的任何帮助？

Answer 1

您的 event.stopPropagation() 需要在被关注的输入字段上的焦点事件触发的函数中。

你需要在(focus)="myFunc($event)时传递事件，然后在myFunc(event) { event.stopPropagation() }时传递。

这应该工作:)