In a reusable component, I implemented some simple logic to clear the value of a select input when the 'x' button is clicked.
select.component.ts
@Input() selectFormControlName: string;
@Input() selectAbstractControl: AbstractControl;
...
clearInput() {
this.selectAbstractControl.patchValue("");
this.selectAbstractControl.updateValueAndValidity();
}
Before clicking the 'X':
https://i.sstatic.net/jvZgv.png
After clicking the 'X':
https://i.sstatic.net/pempF.png
Is there a way to clear the contents without triggering the options dropdown to open?
I've tried looking for an HTML or CSS property that might help with this behavior but haven't found anything yet.
EDIT: Here is the full HTML for the select:
<mat-select
[formControlName]="selectFormControlName"
(openedChange)="isActive = $event"
>
<mat-option
*ngFor="let selection of selectionData | async"
[value]="valuePropertyName ? selection[valuePropertyName] : selection"
(click)="toggleSingleOption()"
>
{{ selection[displayPropertyName] }}
</mat-option>
</mat-select>
<button
*ngIf="includeClearButton && selectAbstractControl.value"
matSuffix
mat-icon-button
type="button"
(click)="clearInput()"
[tabindex]="tabIndex"
>
<mat-icon>close</mat-icon>
</button>
The TypeScript logic mainly consists of the clearInput() method shown above.
It seems like the default behavior of selects and autocompletes is to trigger the options dropdown when clicked anywhere within the input box.
I'm curious if there's a way to override this behavior only for the 'x' button that clears the form value.