Tengo un formulario de comentarios dentro de un menú mat que se ve así:
<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(); para evitar que el menú se cierre cuando hago clic dentro de él, pero aún se cierra cuando me enfoco en el área de texto. ¿Alguna ayuda sobre lo que podría estar causando esto?
Su event.stopPropagation() debe estar en la función activada por el evento de enfoque en el campo de entrada en el que se está enfocando.
Debe pasar el evento cuando (focus)="myFunc($event) y luego en myFunc(event) { event.stopPropagation() } .
Esto debería funcionar :)