I posted this before in primeng forum and I was adviced to post it here too since 'filled' property is present in templates only. However, I found 'filled' property in primeng github source of autocomplete component. I guess it is a basic property of autocomplete, not template exclusive.
I am using primeng 4.0.3 with Ultima.
Label animations with md-inputfield are great and are working almost OK even for p-autoComplete.
I said "almost" because there is a case when it doesn't work Ok, at least as I expected.
When you choose a value from autocomplete's dropdown label overwrite chosen value. This happens because 'filled' property is not set when the value comes from dropdown, as is when is written through keyboard. ( like in writeValue(value: any), I guess) .
I am using a workaround but would be nice if filled property, that turns on ui-inputwrapper-filled class, could be linked to dropdown selection too.
My workaround, in case someone can use it, is :
Add #auto to autocomplete tag and the (onSelect) event callback.
Code: Select all
<span class="ui-g-12 ui-md-12 ui-lg-6 md-inputfield">
<p-autoComplete
#auto
formControlName="popupAbsencesTypes"
[suggestions]="filteredOptions.absencetype"
(completeMethod)="search($event, 'absencetype')"
[dropdown]="true" field="label"
(onSelect)="filled($event)"
(onDropdownClick)="handleDropdown($event, 'absencetype')"
class="autocomplete">
</p-autoComplete>
<label>Absence Type (*)</label>
</span>
Code: Select all
import { ViewChild } from '@angular/core';
import { AutoComplete } from 'primeng/primeng';
@ViewChild('auto') autofield : AutoComplete
filled(evt) {
// onSelect, change filled property of autocomplete to true.
this.autofield.filled = true;
}
Regards,
Diego.
