I am currently working on implementing a feature that requires a field with functionality similar to a select input, but also allows the user to type in their own value if it's not available in the options. The key requirement is that the user should be able to either select from predefined options or input a valid value manually. The options should not be filtered based on input, but rather focus on finding a matching value within the available choices. I've been attempting to achieve this using mat autocomplete, however, I'm facing an issue with scrolling. How can I ensure that the selected option scrolls into view when typing in the field or refocusing on it after making a selection?
HTML
<div>
<mat-form-field [appearance]="'outline'">
<mat-label>Select color</mat-label>
<input type="text" matInput [(ngModel)]="color" [matAutocomplete]="colorOptions">
<i class="icon-caret-down select-arrow" matSuffix></i>
<mat-hint>Select or type a color</mat-hint>
</mat-form-field>
<mat-autocomplete #colorOptions="matAutocomplete">
<mat-option *ngFor="let option of colors; let i=index" [value]="option"
[ngClass]="{'active-option': option == color}">
{{option}}
</mat-option>
</mat-autocomplete>
</div>
TS
public colors = ['Red', 'Green', 'Blue', 'Yellow', 'Orange', 'White', 'Black', 'Purple', 'Grey', 'Brown'];
public color = '';
SCSS
.active-option {
background-color: #f5f5f5 !important;
font-weight: bold !important;
}