It seems that the placeholder for input which reads "Search Here" is not functioning properly. Could it be because it's contained within a mat-form-field?
The only CSS rules defined for the input class are:
.search-input{
width:100%;
}
Any assistance on this matter would be greatly appreciated.
<mat-form-field class="search" floatLabel="never" >
<mat-label for="search"></mat-label>
<input class="search-input" matInput value="" id="search" placeholder="Search here" name="search" type="text" (change)="inputChange($event)" [(ngModel)]="searchText" [matAutocomplete]="auto" (input)="onChange()">
<mat-autocomplete #auto="matAutocomplete">
<mat-option [hidden]="!showPeople" (click)="submitSearch()" [value]="getFullName(user)" *ngFor="let user of persons"><mat-icon class="option">person</mat-icon>{{getFullName(user)}}</mat-option>
<mat-option [hidden]="!showEvents" (click)="submitSearch()" [value]="event.eventName"*ngFor="let event of events "><mat-icon class="option">event</mat-icon>{{event.eventName}}</mat-option>
</mat-autocomplete>
<button type="button" (click)="submitSearch()" mat-icon-button matSuffix class="search-button"><mat-icon><span style="font-weight: bolder;">search</span></mat-icon></button>
</mat-form-field>
I have attempted various approaches to resolve this issue but none have proven successful.