按下回车键后PrimeNG p-autocomplete下拉框无法隐藏的问题求助

I’ve run into this exact quirk with PrimeNG’s AutoComplete component before—clearing the suggestedData array doesn’t automatically collapse the dropdown because the component’s visibility state is managed independently of the data. Here’s a clean, reliable fix:

Step 1: Add a Template Reference to the AutoComplete #

First, give your component a template reference variable so you can access its instance directly in your code:

<p-autoComplete 
  #autoCompleteRef
  id="autocomplete" 
  [(ngModel)]="termToSearch" 
  [minLength]="1" 
  [suggestions]="suggestedData" 
  (completeMethod)="search($event)" 
  placeholder="Search by name..." 
  (onSelect)="goToDetailPage($event)" 
  (onClear)="clearInput()" 
  (keydown.enter)="onSearchSubmit($event)" 
  [forceSelection]="false"> 
</p-autoComplete>

Step 2: Access the Component Instance & Explicitly Hide the Dropdown #

Use Angular’s ViewChild to grab the AutoComplete instance, then call its built-in hide() method in your onSearchSubmit function. This directly toggles the component’s internal visibility state:

import { Component, ViewChild } from '@angular/core';
import { AutoComplete } from 'primeng/autocomplete';
import { Router } from '@angular/router';

@Component({
  // Your component metadata here
})
export class SearchComponent {
  termToSearch: string;
  suggestedData: any[];

  @ViewChild('autoCompleteRef') autoComplete: AutoComplete;

  constructor(private router: Router) {}

  clearInput() { 
    this.termToSearch = null; 
  } 

  clearSuggestions() { 
    this.suggestedData = null; 
  }

  onSearchSubmit(event) {
    // Explicitly hide the dropdown using the component's native method
    if (this.autoComplete) {
      this.autoComplete.hide();
    }

    this.clearSuggestions();
    this.clearInput();
    this.router.navigate(["/search/results"], {queryParams: { q: event.target.value }});
  }

  // Your other methods (search, goToDetailPage) here
}

Why This Works #

PrimeNG’s AutoComplete uses an internal show property to control dropdown visibility—this doesn’t automatically reset when you clear suggestedData. Calling hide() handles all the necessary UI cleanup: it collapses the dropdown, resets the visibility flag, and ensures the component’s state stays consistent with user actions.

If you prefer not to use ViewChild, you can pass the component instance directly via the event:

(keydown.enter)="onSearchSubmit($event, autoCompleteRef)"

Then adjust your method to accept the instance:

onSearchSubmit(event, autoComplete: AutoComplete) {
  autoComplete.hide();
  // Rest of your code
}

Either approach will fix the UI glitch where the dropdown stays visible after clearing suggestions.

内容的提问来源于stack exchange，提问作者J.G.Sable