stopImmediatePropagation на панели расширения матов не работает после обновления до Angular 9

Question

Проблема У меня появилось диалоговое окно со списком панелей расширения с дочерними элементами других панелей расширения. Это все с использованием angular материала. Перед обновлением до Angular 9 я запустил event.stopImmediatePropagation в событии space down, чтобы убедиться, что когда пользователь редактирует поле, которое находится внутри нерасширенной панели, он не будет открывать панель внизу. Теперь, когда я пытаюсь отредактировать это же поле, панель расширения открывается при каждом попадании пробела, и в поле не добавляется пробел.

Ожидаемый результат Я хочу иметь возможность редактировать поля, вложенные в панель расширения, используя пробел для добавления пробелов без открытия панели

Прямая выдача event.stopImmediatePropagation () и event.stopPropagation () больше не работают, а панель расширения все еще открывается в пространстве

Код

 <mat-accordion 
                                cdkDropList
                                id={{question.id}}
                                [cdkDropListData]="question.answers" 
                                cdkDragLockAxis="y"
                                (cdkDropListDropped)="dropQuestion($event)">
                                <mat-expansion-panel *ngFor="let answer of question.answers; let k = index" class="panel-box"
                                    cdkDrag
                                    [cdkDragData]="answer"
                                    #answerPanel>
                                    <div class="panel-placeholder" *cdkDragPlaceholder></div>
<!-- HERE IS THE CODE - IVE ALSO TRIED IMMEDIATEPROPAGATION --> 
                                    <mat-expansion-panel-header  (keydown.Space)="$event.stopPropagation();">
                                        <mat-panel-title>
                                            <input name="placeholder" type="text" (click)="$event.stopPropagation()" placeholder="Enter placeholder" [ngModel]="answer.isButton ? answer.displayValue : answer.placeholderText" (ngModelChange)="answer.isButton ? answer.displayValue=$event : answer.placeholderText=$event" class="condition-input">
                                        </mat-panel-title>
                                        <mat-panel-description>
                                            Click to edit this {{returnAnswerType(answer)}}
                                        </mat-panel-description>
                                    </mat-expansion-panel-header>
                                    <mat-action-row class="action-row">
                                        <div>
                                            <button style="color: #000" class="action-button" mat-mini-fab color="secondary" (click)="moveObject('answer', 1, i, j, k)">
                                                <mat-icon class="action-button-icon" matTooltip="Move Down">arrow_downward</mat-icon></button>
                                            <button style="color: #000" class="action-button" mat-mini-fab color="secondary" (click)="moveObject('answer', -1, i, j, k)">
                                                <mat-icon class="action-button-icon" matTooltip="Move Up">arrow_upward</mat-icon></button>
                                        </div>
                                        <div>
                                            <button class="action-button" disableRipple mat-raised-button color="primary" (click)="updateForm(false)"><mat-icon class="action-button-icon" matTooltip="Save">save_alt</mat-icon></button>
                                            <button class="action-button" style="color: #000" disableRipple mat-raised-button color="secondary" (click)="openAnswerSettingsDialog(answer, question)"><mat-icon class="action-button-icon" matTooltip="Edit">edit</mat-icon></button>
                                            <button mat-raised-button color="secondary" *ngIf="answer.isCard" style="color: #000;" class="action-button" (click)="openImagePickerDialog(null, answer, 'answer', i, j, k)"><mat-icon class="action-button-icon" matTooltip="Change Icon">add_photo_alternate</mat-icon></button>
                                            <button mat-raised-button color="secondary" style="color: #000;" class="action-button" (click)="openConditionsDialog('answer', answer)"><mat-icon class="action-button-icon" matTooltip="Conditions">shuffle</mat-icon></button>
                                            <button class="action-button" style="color: #000" disableRipple mat-raised-button color="secondary" (click)="addObject('answer', i, j, true, answer)"><mat-icon class="action-button-icon" matTooltip="Duplicate">file_copy</mat-icon></button>
                                            <button class="action-button" disableRipple mat-raised-button color="warn" (click)="deleteObject('answer', i, j, k, answer.id)"><mat-icon class="action-button-icon" matTooltip="Delete">delete</mat-icon></button>
                                        </div>
                                    </mat-action-row>
                                </mat-expansion-panel>
                            </mat-accordion> 
    ```

Answer 1

Я обнаружил проблему. Событие должно быть на входе, а не на самой панели ...