On the initial load, if I click on the "Sales" accordion and then click on "Reported and Forecasted Total Sales", the scroll bar for the marker will jump to the top
tagged ng-container for reporting and forecasting total sales UI
The following is the HTML for the Total Report and Forecast Sales UI
<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}} </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}} </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}} </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}} </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}} </span>
</mat-label>
<input matInput appNonNumeric placeholder="To" formControlName="drugSaleValueToCtrl">
</mat-form-field>
</form>
</div>
</div>
</ng-container>
Add preserve and check if it is valid