I have an angular component consisting of ngprime p-dialog. In the body of this dialog there is p-dropdown. When I click on dropdown options are shown, but there is situation that user accidentally can click on closing dialog. The second time when dialog is opened, the dropdown options are available after double click, because the onHide event is executed on first click. Is there any way to close p-dropdown options on closing the dialog? Here's code
HTML
<p-dialog #dialog [closeOnEscape]="closeDialog" [responsive]="true" [modal]="true" [(visible)]="shown" styleClass="modal" [maximizable]="false" [baseZIndex]="1000" minWidth="200px" [width]="669" (onHide)="hideModal()" [draggable]="false"> <p-header>{{category.name}}</p-header> <div> <p-dropdown #dropdown placeholder="Choose a sub-category" [options]="subcategories" optionLabel="name [(ngModel)]="selectedSubcategory"> </p-dropdown> </div> </p-dialog> TS
export class SuggestionsComponent implements OnInit { @Input() category: CategoryDTO; @Input() shown: boolean; @Output() onHideModal: EventEmitter<boolean> = new EventEmitter<boolean>(); subcategories: SubcategoryDTO[]; selectedSubcategory: SubcategoryDTO; newQuestion: string = ''; constructor(private categoryService: CategoryService, private surveyService: SurveyService, private toastNotificationService: ToastNotificationService, private internetConnectionService: InternetConnectionService, private loadingService: LoadingService) { this.onHideModal = new EventEmitter<boolean>(); } ngOnInit() { if (this.category.id != null) { this.categoryService.getSubcategoriesByCategory(this.category).subscribe( subcategories => { this.onHideModal.emit(true); this.subcategories = subcategories.value; }, (error) => { this.internetConnectionService.showToastWhenErrorOccurred(error, " get subcategories"); } ); } } hideModal() { this.shown = false; this.newQuestion = ""; this.selectedSubcategory = null; this.onHideModal.emit(true); } } 1 Answer
p-dropdown has a method focus() you can call it after your modal was opened. (Use the onShow() Event of your p-dialog to call the
Controller
onModalShow() Method
import { Component, ViewChild } from '@angular/core'; @ViewChild('dropdown') dropdown; onModalShow() { this.dropdown.focus(); } Template
<p-dialog #dialog [closeOnEscape]="closeDialog" [responsive]="true" [modal]="true" [(visible)]="shown" styleClass="modal" [maximizable]="false" [baseZIndex]="1000" minWidth="200px" [width]="669" (onHide)="hideModal()" [draggable]="false" (onShow)="onModalShow()"> <p-header>{{category.name}}</p-header> <div> <p-dropdown #dropdown placeholder="Choose a sub-category" [options]="subcategories" optionLabel="name [(ngModel)]="selectedSubcategory"> </p-dropdown> </div> </p-dialog> 
