Autocomplete remains in focus with forceSelection

[huineng]

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

[x ] bug report
[x ] feature request 

Current behavior
I have a user story where the autocomplete input becomes readonly after selection (onSelect)
With the latest 4.3 X release that input field remains on focus meaning the whole form (whole page) becomes unselectable

Expected behavior
Autocomplete should get out of focus .. this.onfocus=false; when input element is in readmode

Maybe a code can be added with onblur or onselect that checks if the input element is in readmode (or maybe also disabled)

If that is the case then this.onfocus = false

ps maybe the onInputBlur is never called when a input element is in readonly

thanks

[bogacg]

I see same problem, focus not leaving autoComplete, when forceSelection is used with object selection.

[SpiderPork]

I can confirm the problem with 4.3 RC2

[viswa-optimusprime]

I have same issue. Please find the plnkr. Its holding my project. Can you tell me the workaround please?
@cagataycivici https://plnkr.co/edit/cvnYa6?p=preview

<p-autoComplete [(ngModel)]="seletedProject"
[suggestions]="filterProjectSingle"
(completeMethod)="filterProjectSingleEvent($event)" field="projectName"
[size]="30" placeholder="Projects" [minLength]="1"
[multiple]="false" [forceSelection]="true"
[dropdown]="true" (onSelect)="selectProject($event)">

[ili]

The same problem with 4.3.0: focus is not leaving when value is selected for autocomplete in Force Selection mode. Only way to "tab" from the control is to clear it's input.

Plnkr: http://plnkr.co/edit/C7b0lSV30CRk496KomWx?p=preview

P.S. the interesting point is: when forceSelection="true" after onBlur event onSelect event is fired. And it is fired only when value is selected.

[ili]

Yap, yes, here is the problem:
this.selectItem is called onInputBlur
https://github.com/primefaces/primeng/blob/master/src/app/components/autocomplete/autocomplete.ts#L521

and here: https://github.com/primefaces/primeng/blob/master/src/app/components/autocomplete/autocomplete.ts#L359 this method returns focus to the input

:(( fix needed

[viswa-optimusprime]

is this issue fixed with forceselection=true?

[faizu88]

As this issue is fixed in PrimeNG 5.0.0-RC0 [Angular v5], But still this is an issue for those who using Angular v4.
From your note it's clear that PrimeNg do not have plans to do a new release on PrimeNG 4.x branch. So will I be getting patch release or not?

[svinesh3691]

Agreed with @faizu88

[alaa9jo]

Totally agree with @faizu88 , we need a patch for this issue, for now I had to use the fix suggested by @ili and it worked like a charm

[huineng]

The implementation is not correct in my opinion

(as mentioned above ) whenever forceselection is set to true and you have made a selection
THEN whenever you want to click on a control like another button , the first thing that happens is that the onInputBlur is being called which in turns calls the onselect (again..)

this makes this implementation useless in any form with just an autocomplete and a submit button, (users might think the submit button is not working)

I've sold this issue for the moment by resetting the suggestions to undefined so that this line is evaluated false. Hope this might help for other people

ps my suggestions are from a http call, others might have predefined suggestions, so for them a different solution might be found

if(this.forceSelection && this.suggestions) {

https://github.com/primefaces/primeng/blob/master/src/app/components/autocomplete/autocomplete.ts#L512

[NAMSGithub]

confirmed that updating primeNG to ^5.0.0 when experiencing this bug using Angular 5 fixed this for me.

[sbkpilot1]

I had the same issue and can confirm as well that upgrading to PrimeNG 5.0.2 (^5.0.0) fixed this issue :)

[flhaz]

Hi, thank your for this great lib, Is there any solution for those are stuck on version 4 of Angular ?

[preterer]

A workaround for this issue is to make an onBlur method in your component, that will disable the component, and enable it again in the next event loop. This will force the element to get unfocused, since you cannot focus a disabled input, and then re-enable it, to make it focusable again.

Sample code:

public disabled = false;
...
onBlur() {
        this.disabled = true;
        setTimeout(() => (this.disabled = false));
    }

<p-autoComplete [disabled]="disabled" (onBlur)="blur()">

[preterer]

Another solution (the proper one, not a hacky one) is to clear your suggestions in the onSelect.
You also have to clear your result for single mode onDropdownClick if you are using dropdown mode, or you will be stuck with the once selected value.