Вход не работает внутри панели расширения углового материала.Не могу добавить пробел

Question

У меня есть текстовый ввод внутри панели расширения Angular Material.Однако, когда я пытаюсь добавить пробел в поле ввода, вместо этого переключается панель расширения.Как решить эту проблему?

Код панели, содержащей ввод:

  <mat-expansion-panel-header [collapsedHeight]="'1.55em'" [expandedHeight]="'1.55em'">
    <div class="header-left-container">
      <i class="fas fa-question"></i>
      <div *ngIf="isEditing == false" class="name">{{question.questionStr}}</div>
      <div *ngIf="isEditing == true">
        <input #textfield type="text" onClick="this.select; event.stopPropagation()()" [(ngModel)]="question.questionStr" placeholder="Title" />
      </div>
      <mat-checkbox *ngIf="isEditing == false" class="check-box" (click)="$event.stopPropagation()" (change)="checkChanged()" [(ngModel)]="question.isChecked"></mat-checkbox>
    </div>
    <div class="header-right-container">
      <button style="margin-right: 10px" *ngIf="!isEditing && !hideButtons" mat-raised-button (click)="editClicked($event); $event.stopPropagation()" [color]="'primary'">Edit</button>
      <button style="margin-right: 10px" *ngIf="isEditing && !hideButtons" mat-raised-button (click)="saveEditClicked($event); $event.stopPropagation()" [color]="'primary'">Save</button>
      <button *ngIf="!hideButtons" mat-raised-button (click)="addAnswer($event); $event.stopPropagation()" [color]="'primary'">
        <i class="fas fa-plus"></i>
        Add answer
      </button>
    </div>
  </mat-expansion-panel-header>

  <div *ngFor="let answer of question.answers">
    <app-answer-panel [hideButtons]="hideButtons" [answer]="answer"></app-answer-panel>
  </div>

</mat-expansion-panel>

Answer 1

Решается добавлением (keydown)="$event.stopPropagation()" к входу.Пробел больше не переключается и добавление пробелов работает.