Блог

У меня есть форма обратной связи внутри мат-меню, которая выглядит следующим образом:

 <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(); , чтобы меню не закрывалось, когда я нажимаю внутри него, но оно все равно закрывается, когда я фокусируюсь на текстовой области. Любая помощь в том, что может быть причиной этого?

Ваше событие.stopPropagation() должно быть в функции, запускаемой событием фокусировки на поле ввода, на котором фокусируется.

Вам нужно пройти мероприятие, когда (focus)="myFunc($event) , а затем в myFunc(event) { event.stopPropagation() } .

Это должно сработать 🙂