Prime Community Forum

Hi Team,

I have a autocomplete drop down list which i am using in my application. And, in that drop down when i try to enter a value which is not part of my suggestions (list) then on tab out sometime it does not clears.
Based on research done so far it seems this issue has been encountered by multiple people but there is no concrete answer posted by anyone.

It would be helpful if you anyone can help me here. Please refer below for details:-

Current behavior:
On Tab out invalid value entered is not cleared, Also if i try to see it in rendered HTML then it not found there either.

Expected Behaviour:
On Tab out an invalid entry should be cleared.

Steps to Reproduce:
1. select any option of the suggestions list;
2. without losing focus of the component override the selected value with anything;
3.: while you're overriding the value, do something to lose focus of the component, it has to be done really fast to work;
If you do that it should keep the value in the input field.

NOTE: In my case even when i override is in delay of Milliseconds it does not work.

Code Snippet for HTML:

<p-autoComplete [id]="'dpdbucategory'" formControlName="buCategory" required="required"
[suggestions]="buCategories" (completeMethod)="searchBUCategoryItems($event)" [minLength]="3"
[maxlength]="100" [dropdown]="true" [showTransitionOptions]="'0ms'" [forceSelection]="true"
[emptyMessage]="'Item Not Found'" field="name" dataKey="id" [hideTransitionOptions]="'0ms'"
placeholder="BU Category" (onClear)="clearBUvsNonBU($event)" (onUnSelect)="selectBUvsNonBU($event)"
(onSelect)="selectBUvsNonBU($event)" [multiple]="false" (onBlur)="blurBUvsNonBU($event)"
[ngClass]="{'inactive-item-cnt-bu-cat-name':validationFlags.dpdBUCategoryIsInactive}">
</p-autoComplete>

Code Snippet for Component:
/** Is called on completeMethod event */
searchBUCategoryItems(event) {
const queryParameter = event.query;
this.buCategories = this.service.getBUCategories(this.allBUCategories, queryParameter);
}
/** Is called on OnClear event */
clearBUvsNonBU(event) {
this.validationFlags.dpdBUCategoryIsInactive = (event) ? false : true;
this.validationFlags.dpdBUCategoryIsInvalid = true;
}

/** Is called on OnSelect event */
selectBUvsNonBU(event) {
this.validationFlags.dpdBUCategoryIsInvalid = (event) ? false : true;
}

/** Is called on blur event */
blurBUvsNonBU(event) {
if (event.target.value) {
const exists = this.allBUCategories.Any(w => w == event.target.value && w.Inactive == false);
if (exists == false) {console.log('bu');
this.buCategories = null;
}
}
}