AutoComplete input does not reflect model changes

[ChrisA9]

I'm submitting a ... (check one with "x")

[x] bug report => Search github for a similar issue or PR before submitting
[ ] feature request => Please check if request is not on the roadmap already https://github.com/primefaces/primeng/wiki/Roadmap
[ ] support request => Please do not submit support request here, instead see http://forum.primefaces.org/viewforum.php?f=35

Plunkr Case (Bug Reports)
http://plnkr.co/edit/r7DnQw?p=info

Current behavior
Text does not clear from autocomplete box

Expected behavior
Text should clear from autocomplete box

Please tell us about your environment:
OS : WIndows 7

• Angular version: 4.0.3

• PrimeNG version: 4.0.1

• Browser: Chrome 58.0.3029.110 (64-bit),

[sudheerj]

#2778

[ohadinho]

I've installed 4.0.2 but this bug is still there. I'm changing a variable that has a two way binding to a model but the change doesn't reflect the text box value.

[ohadinho]

The issue occurs after selecting a value from the dropdown and trying to change it on OnSelect event handler

[sudheerj]

@ohadinho I can't replicate the issue. The value is reflected after button clear using both single and multiple features.

[ohadinho]

Steps to replicate: 1. Press the arrow to open the dropdown 2. Choose a value 3. Debug "OnSelect" method and change the ngModel variable value. Expected Result: Value is the same as you defined after the change on OnSelect method. Actual Result: The change in variable binded to ngModel didn't affect the input text.

…

On Jun 10, 2017 06:47, "Sudheer Jonna" ***@***.***> wrote: @ohadinho <https://github.com/ohadinho> I can't replicate the issue. The value is reflected after button clear using both single and multiple features. — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#2882 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AEqculVUF5yHTKUZA8qszHrMSXbpYi1gks5sChHGgaJpZM4NmX7r> .

[thirumalai-kc]

primeNg version: 4.1.0

<p-autoComplete placeholder="Start typing name to see suggestions" formControlName="customerRequest" [suggestions]="customerResults" (completeMethod)="searchCustomer('customer_name', $event.query)" minLength="3" field="accountName" (onSelect)="setCustomerRequest($event)">

Start type 'abc'
Do not choose a value from the option
Perform clear (Here setting customerRequest to null)

Result: customerRequest (model) set to null but the field is not cleared/reset.

Expected: Field should be reset to null.

If I select some value from the option and clear, field is reset to null. Please address this issue.

[macleanpinto]

Issue exists in 4.1.2 as well

[iblank]

primeNg version: 4.1.3

I noticed that p-autoComplete expects the model to be type object in the template. If the value is a string, the resolveFieldData method returns undefined, which sets the input value to an empty string.

Changing this fixes it for me:

[value]=\"value ? (field ? objectUtils.resolveFieldData(value,field)||'': value) : null\"

To:

[value]=\"value ? objectUtils.resolveFieldData(value,field)||value : null\"

Alternatively adding this at the top of the resolveFieldData method works as well (and is probably the safer way to handle it):

if (typeof data === 'string') {
    return data;
}

[metacoding]

The problem still exists in version 4.1.3, why did you close the issue?

[billfranklin]

@iblank alternate method works for me....please make this change

[omerbuyuksar]

When i cleared the suggestions input field. It worked for my case. But issue still exists.

[photostu]

Still broken, wanting to clear the control when a selection is made... I null out the bound model and the suggestions list onSelect within a setTimeout even... when you click elsewhere on the screen, it does clear out

[billfranklin]

Status of this fix?

[MatteoMeil]

Found a possiblle workaround.
Check out this comment

[DipankarDDUT]

Another approach :

Create a template variable suppose
@ViewChild('station', { static: true }) stationDrpdown: ElementRef;

in autoComplete tag #station
(onSelect)="onStationSelection($event)"

onStationSelection(station){
....

this.stationDrpdown['inputFieldValue']=station.name;
...
}