mat-autocomplete auto-hide placeholder text on input focus

Question

I am making use of the mat-autocomplete component with an input as per the examples in the docs, and I have configured the input to use a label and have non floating placeholder text like so:

<mat-form-field floatLabel="never">
  <input 
    type="text" 
    placeholder="Search..." 
    aria-label="Number" 
    matInput 
    [formControl]="search" 
    [matAutocomplete]="auto">
  <button 
    mat-button 
    *ngIf="search.value" 
    matSuffix 
    mat-icon-button 
    aria-label="Clear" (click)="clearSearch()">
      <mat-icon>close</mat-icon>
  </button>
  <mat-autocomplete 
    #auto="matAutocomplete" 
    (optionSelected)="goToResult($event)">
    <mat-option 
      *ngFor="let result of searchResults" 
      [value]="result">
      {{result.id}}
    </mat-option>
  </mat-autocomplete>
</mat-form-field>

When clicking into the input to start entering characters, the placeholder doesn't disappear, not until I enter the first character. Am I missing some config\properties that should be set?

Or do I need to set up a placeholder value binding and set it\clear it myself?

Thanks

This is the normal way that is executed. Endeed, the placeholder will only disappear when the first character is entered. — Wandrille, Aug 26 '18 at 21:04

score 16 · Accepted Answer · answered Aug 27 '18 at 07:04

You can remove the placeholder in the input and add a mat-placeholder in the mat-form-field and custom the css with a class.

HTML file:

<form class="example-form">
  <mat-form-field floatLabel="never">
      <input 
        matInput 
        type="text" 
        aria-label="Number" 
        matInput [formControl]="myControl" 
        [matAutocomplete]  ="auto">

      <mat-placeholder class="placeholder">Search</mat-placeholder>

      <mat-autocomplete #auto="matAutocomplete">
        <mat-option *ngFor="let option of options" [value]="option">
          {{option}}
        </mat-option>
      </mat-autocomplete>
  </mat-form-field>
</form>

CSS file:

.mat-focused .placeholder {
    color: transparent;
}

.example-form {
  min-width: 150px;
  max-width: 500px;
  width: 100%;
}

.example-full-width {
  width: 100%;
}

That didn't work for me in case of long placeholders that are rendered with ellipsis ("..."), as the dots are not hidden. I had to use this CSS instead: .mat-focused .placeholder { display: none; } — zeroquaranta, Apr 14 '21 at 15:13

bresleveloper · Answer 2 · 2019-03-17T02:29:19.133

using OOTB matInput and hiding the placeholder "on-float" only

/*hide the floating mat input part */
.mat-form-field-should-float .mat-form-field-label-wrapper {display: none;}

complete solution

.middle-cut .mat-form-field-should-float .mat-form-field-label-wrapper {display: none;}
.middle-cut .mat-form-field-should-float .mat-form-field-infix {    margin-top: -10px;}
.middle-cut .mat-form-field-infix  {border:0; padding-top:0; padding: .1375em 0; }
.middle-cut .mat-form-field-label{top: 0.85em;}

score 0 · Answer 3 · answered Feb 01 '20 at 23:12

0

you can use mat-placeholder and hide it by adding a class to it on (focus) event which will hide placeholder. See this link https://stackoverflow.com/a/60021883/9026103

answered Feb 01 '20 at 23:12

Igor Kurkov

4,318
2
30
31

mat-autocomplete auto-hide placeholder text on input focus

3 Answers3