mat-select is scrolling up when selecting - continuation

[AntonBobylev]

The select expects options to be of a certain height and we currently don't support overriding it so you're doing it at your own risk.

Originally posted by @crisbeto in #18154

Look, I have the multiple mat-select, all rows have equal height, but scroll moves itself when select any option.

scroll.webm

template:

<div style="position: relative; width: 100%">
    <div class="loading-spinner-wrapper"
         [style.display]="isLoading() ? 'flex' : 'none'"
    >
        <app-loading-spinner [isLoading]="isLoading()" />
    </div>

    <mat-form-field appearance="outline"
                    [formGroup]="parentFormGroup"
                    [floatLabel]="floatLabel"
    >
        @if (label) {
            <mat-label>{{ label }}</mat-label>
        }
        <mat-select #fieldCtrl
                    [multiple]="isSupercombo"
                    [formControlName]="name"
                    [placeholder]="placeholder"
                    (valueChange)="onValueChanged.emit($event)"
        >
            @if (isSupercombo && valuesSeparator !== ',') {
                <mat-select-trigger>
                    <span>{{ getSelectedItemsDisplayValue() }}</span>
                </mat-select-trigger>
            }

            <!--@if (searchRequired && !EmsowAngular.isEmpty(data)) {
                <mat-option>
                    <ngx-mat-select-search [formControl]="searchCtrl"
                                           [noEntriesFoundLabel]="searchNothingFoundMessage"
                                           [placeholderLabel]="searchTooltip"
                                           [showToggleAllCheckbox]="showToggleAllCheckbox"
                                           (toggleAll)="onToggleAll($event)"
                                           [toggleAllCheckboxTooltipMessage]="toggleAllTooltip"
                    >
                        <mat-icon ngxMatSelectSearchClear
                                  class="material-symbols-outlined"
                        >
                            close
                        </mat-icon>
                    </ngx-mat-select-search>
                </mat-option>
            }-->

            @if (emptyOptionRequired) {
                <mat-option><span class="option">{{ emptyOptionLabel }}</span></mat-option>
            }

            <mat-option *ngFor="let record of filteredRecords()"
                        [value]="record"
            >
                <span class="option">{{ record.displayValue }}</span>
            </mat-option>
        </mat-select>

        @if (isAddNewEntity) {
            <app-icon-button matSuffix
                             icon="add"
                             (onClickEvent)="onAddNewEntity($event)"
            />
        }

        @if (clearBtnRequired && getValue() && !EmsowAngular.isEmpty(getValue())) {
            <app-icon-button matSuffix
                             icon="close"
                             (onClickEvent)="clear($event)"
            />
        }
    </mat-form-field>
</div>

styles:

mat-form-field {
    width: 100%;
}

.option {
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}

[AntonBobylev]

Ok, after some research, I can commit that this method is working: #18651 (comment)

made it like so:

let me: this = this;
me.fieldCtrl.optionSelectionChanges.subscribe((): void => {
    me.scrollTopBeforeSelection = me.fieldCtrl.panel.nativeElement.scrollTop;
    let selectionInProgress: boolean = true;
    me.fieldCtrl.panel.nativeElement.onscroll = function (event: any): void {
        if (!selectionInProgress) {
            return;
        }
        event.target.scrollTop = me.scrollTopBeforeSelection;
        selectionInProgress = false;
    };
});