Existe-t-il une solution au problème selon lequel la barre de défilement sur le côté gauche de la boîte modale revient en haut lorsque l'on clique sur un élément de l'accordéon ?

Question

Lors du chargement initial, si je clique sur l'accordéon "Ventes" puis sur "Ventes totales déclarées et prévues", la barre de défilement étiquetée sautera vers le haut

tagged ng-container pour le reporting et la prévision des ventes totales de l'interface utilisateur

Voici le code HTML du rapport total et de l'interface utilisateur des ventes prévisionnelles

<ng-container *ngIf="cciLeftSideFilterSplitIO && dataSetName === 'DRUGS'">
            <div mat-dialog-content class="matContent" *ngIf="filter.filterGroupKey === 'drugReportedSalesAndForecastGroup'">
                <div class="drugSaleGroupContainer" *ngIf="regions.length > 0">
                    <form [formGroup]="drugSaleForm">
                        <mat-form-field appearance="outline" class="drugSaleRegion">
                            <mat-label>
                              <span class="ctrlTxt">{{"I18N.DRUGS.FILTERS.DISPLAYNAMES.drugSaleRegion" | translate}}&nbsp;</span>
                            </mat-label>
                            <mat-select (click)="showRegion()" panelClass="select-panel-class" [formControlName]="'drugSaleRegionCtrl'">
                              <mat-option *ngFor="let region of regions" [value]="region.optionName">{{region.optionName}}</mat-option>
                            </mat-select>
                        </mat-form-field>
                        <mat-form-field appearance="outline" class="drugSaleYears" id="fromYear">
                            <mat-label>
                              <span class="ctrlTxt">{{"I18N.DRUGS.FILTERS.DISPLAYNAMES.drugSaleYearFrom" | translate}}&nbsp;</span>
                            </mat-label>
                            <input appDrugSaleYearFormat (click)="fromYear.open()" appNonNumeric matInput [min]="minYearFrom" [max]="maxYearFrom" [(ngModel)]="selectedFromYear"
                            [matDatepicker]="fromYear" class="dateInputElmt"
                            formControlName="drugSaleYearFromCtrl" (ngModelChange)="datePickedEvent('input','from', $event)">
                            <mat-datepicker-toggle matSuffix [for]="fromYear">
                            </mat-datepicker-toggle>
                            <mat-datepicker class="from-date-picker-ref" panelClass="quick-finder-year-picker" #fromYear startView= 'multi-year' (yearSelected)="chosenYearHandler('from', $event, fromYear)"></mat-datepicker>
                        </mat-form-field>
                        <mat-form-field appearance="outline" class="drugSaleYears" id="toYear">
                            <mat-label>
                              <span class="ctrlTxt">{{"I18N.DRUGS.FILTERS.DISPLAYNAMES.drugSaleYearTo" | translate}}&nbsp;</span>
                            </mat-label>
                            <input appDrugSaleYearFormat (click)="toYear.open()" appNonNumeric matInput [min]="minYearTo" [max]="maxYearTo" [(ngModel)]="selectedToYear" 
                            [matDatepicker]="toYear" class="dateInputElmt"
                            formControlName="drugSaleYearToCtrl" (ngModelChange)="datePickedEvent('input','to', $event)">
                            <mat-datepicker-toggle matSuffix [for]="toYear">
                            </mat-datepicker-toggle>
                            <mat-datepicker class="from-date-picker-ref" panelClass="quick-finder-year-picker" #toYear startView= 'multi-year' (yearSelected)="chosenYearHandler('to',$event,toYear)" ></mat-datepicker>
                        </mat-form-field>
                        <span class="drugSaleBtnGroup">
                            <button class="drugSaleClearBtn" (click)="clearSalesFilter()">Clear</button>
                        </span>
                        <mat-form-field appearance="outline" class="drugSaleYears" id="fromValue">
                            <mat-label>
                              <span class="ctrlTxt">{{"I18N.DRUGS.FILTERS.DISPLAYNAMES.drugSalesYearValue" | translate}}&nbsp;</span>
                            </mat-label>
                            <input matInput appNonNumeric placeholder="From" formControlName="drugSaleValueFromCtrl">
                        </mat-form-field>
                        <mat-form-field appearance="outline" class="drugSaleYears" id="toValue">
                            <mat-label>
                              <span class="ctrlTxt">{{"I18N.DRUGS.FILTERS.DISPLAYNAMES.drugSalesYearValue" | translate}}&nbsp;</span>
                            </mat-label>
                            <input matInput appNonNumeric placeholder="To" formControlName="drugSaleValueToCtrl">
                        </mat-form-field>
                    </form>
                </div>
            </div>
        </ng-container>

Answer 1

<div mat-dialog-content class="matContent" *ngIf="filter.filterGroupKey === 'drugReportedSalesAndForecastGroup'" preserve>
  </div>

Ajoutez de la confiture et vérifiez si cela fonctionne