Prevent mat-menu close on form input focus

Issue

I have a feedback form inside a mat-menu that looks like this:

<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>

I added $event.stopPropagation(); to prevent the menu from closing when I click inside it but it still closes when I focus on the textarea. Any help on what could be causing this?

Solution

Your event.stopPropagation() needs to be in the function triggered by the focus event on the input field being focused on.

You need to pass the event when the (focus)="myFunc($event) and then in the myFunc(event) { event.stopPropagation() }.

This should work :)

Answered By - mikegross