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?
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 :)