Clicking dropdown button on an autocomplete doesn't show the panel of options

[smith-michael]

If I set the dropdown property on the p-autoComplete component I see the dropdown button. However, when I click on it, the panel of options doesn't display.

I did a little debugging and it appears that there is a click handler used to hide the panel, but this is getting called when I click the dropdown button and hiding the panel.

ngAfterViewInit() {
        this.input = this.domHandler.findSingle(this.el.nativeElement, 'input');
        this.panel = this.domHandler.findSingle(this.el.nativeElement, 'div.ui-autocomplete-panel');

        if(this.multiple) {
            this.multipleContainer = this.domHandler.findSingle(this.el.nativeElement, 'ul.ui-autocomplete-multiple');
        }

        this.documentClickListener = this.renderer.listenGlobal('body', 'click', () => {
            this.hide();
        });
    }

[bogacg]

I've noticed same thing. Is this a bug or expected behavior? Didn't make sense to me.

[brtnshrdr]

I was able to fix it by doing the following in the onDropdownClick event handler:

handleDropdownClick(event: {originalEvent: Event, query: string}) {
    event.originalEvent.preventDefault();
    event.originalEvent.stopPropagation();
    this.getAutocompleteComponent().show();
}

Where this.getAutocompleteComponent() returns the AutoComplete component instance via @ViewChild(AutoComplete) private autoComplete: AutoComplete;

[DmitryEfimenko]

following up on @brtnshrdr's workaround. Minor improvement to make sure clicking on the button toggles panel - not just shows it:

handleDropdown(event) {
    event.originalEvent.preventDefault();
    event.originalEvent.stopPropagation();
    if (this.autoCompleteComponent.panelVisible) {
      this.autoCompleteComponent.hide();
    } else {
      this.autoCompleteComponent.show();
    }
  }

Extremly ugly, but works.

[garthmason]

Yep, I've noticed the same bug - the workaround @brtnshrdr and @DmitryEfimenko suggested works a treat though!

[brian428]

+1. The odd thing is that it seems to work in the PrimeNG demo page.

[woontsoudev]

I was able to reproduce this error on Safari and FireFox, using the prime NG version 1.0.1 and the proposed workaround didn’t work, there is something else I can try to fix it?

[brian428]

You might try a more recent version. The workaround above (manually triggering show/hide) worked for me.

[Temetz]

This seems to be some sort of race condition.

The following code in the demo WORKS:

handleDropdownClick() {
        this.filteredBrands = [];

        //mimic remote call
        setTimeout(() => {
            this.filteredBrands = this.brands;
        }, 100)
    }

However if we remove the setTimeout, the code DOES NOT WORK

handleDropdownClick() {
        this.filteredBrands = [];

        //This does not work
        this.filteredBrands = this.brands;
    }

[fmontes]

Hi,

Any ETA on this? it doesn't work on the primeng page: http://www.primefaces.org/primeng/#/autocomplete

Regards.

[tricodon]

Hello,

for me it works on Firefox, Chrome and Safari while setting focus too:

  handleDropdownClick(event) {
    this.suggestions = [];
    this.suggestions = this.data;

    event.originalEvent.preventDefault();
    event.originalEvent.stopPropagation();
    if (this.autoComplete.panelVisible) {
      this.autoComplete.onDropdownBlur();
      this.autoComplete.hide();
    } else {
      this.autoComplete.onDropdownFocus();
      this.autoComplete.show();
    }
  }

[jo75]

Hi, for me the dropdown click works at the demo page with:

• Chrome (MacOS)
• Firefox (Windows)
• Firefox (Linux)
• IE

it works not on:

• Safari (MacOS)
• Firefox (MacOS)

[luchillo17]

@jo75 I think most people does work with the demo page, the issue is when implementing with no delay, basically when the values are local and not from server.

Almost all workarounds are about getting the autocomplete ViewChild reference and telling it to trigger focus and show.

[luchillo17]

@Temetz Setting the timeout to 0 or just dropping the delay still works.

Thus it's a race condition, the setTimeout without time set's the task to be at last in the JS event queue, quite an interesting bug there.

Btw is the same both for the freaking completeMethod callback and the onDropdownClick callback.

[luchillo17]

It seems i have another issue, pressing first time in dropdown does show the list, but the second time it doesn't show, ever again, unless i use the text field of the autocomplete to start another search and then click again, then it works.

[jmls]

wow. I just hit this as well. How annoying. 9 months since it was first reported ..

[luchillo17]

Seems like the workaround is to call the show method in the autocomplete when either the dropdown button is called, or the filter function (for when typing for autocomplete) is called, that way you ensure it shows.

Though we need to be careful of race conditions, the workaround works but the suggestions are loaded correctly only if some delay is introduced between the suggestion's variable assignation and the call of the show method.

[Mrtcndkn]

Please try with the latest PrimeNG version and comment if the issue still persists.

[bababudha]

I'm using primeng:"4.0.0" and ng-version="4.1.0" and have the same problem both on Chrome and Safari even if I have setTimeout in handleDropDownClick(). It is working with setTimeout in primeng:"2.0.0-rc.2" and ng-version="2.4.10".

[Mrtcndkn]

Can you please create a plunkr about this because I can't replicate it locally.

[togbyte]

same issue in priming 4.0.3

[macleanpinto]

same issue exists in 4.1.2

[joaopgrassi]

Same problem here. I'm using 4.1.0

[pajics]

Here is a plunkr, where dropdown doesn't show: http://plnkr.co/edit/vnUiAJiiJY3uIetsLG3R?p=preview

In my application dropdown works once like @luchillo17 said, but that is because there is a actual call to the backend. On second click it doesn't work as promise is already resolved. In case of plunkr promise is resolved immediately and that is why it never shows

[fcostazini]

On version 4.1.3, the Workaround does not work any more. I had to fallback to 4.1.2

[SSTPIERRE2]

Issue still seems to persist with version 7.0.3 😞

[domessina]

The autocomplete dropdown is not shown if concat is not used.

search(event) {
    const search = event.query;
    if (search === undefined || !search.length) {
      this.filteredResults = [];
      this.filteredResults = this.filteredResults.concat(this.possibilities);
}

[BenjenJones]

i have the issue, that it is opened, but not closed when clicking on the dropdown button again ...