how to prevent matInput inside a matFormField to truncate mutiple spaces in placeHolder

Question

I have an angular 11 app.

i use mat-autocomplete and a mat-input behind it to show autocomplete hints in the input itself.

i use the placeholder property to show autocomplete data. the problem is that if i have a matInput inside a <mat-form-field> it truncates several spaces to one space. so if my placeholder holdes foo bar it will show it as foo bar. is ther a way to overcome this ?

I created a stackblitz that represents my problem:

StackBlitz Demo

thank you!

Answer 1

Replace the spaces with a   non-breaking space.

<mat-form-field>
    <input matInput placeholder="A&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;moshe">
</mat-form-field>

Fork of your Stackblitz.