CODEWITHSUNDEEP
angularprimengprimeng-dropdowns
szachMati
szachMati

Reputation: 216

How to close p-dropdown on p-dialog close?

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 class="modal__header">{{category.name}}</p-header>
  <div class="modal__subcategory">
    <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);
    }
}

Upvotes: 1

Views: 3347

Answers (1)

Riscie
Riscie

Reputation: 4689

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 class="modal__header">{{category.name}}</p-header>
<div class="modal__subcategory">
    <p-dropdown #dropdown  placeholder="Choose a sub-category" 
    [options]="subcategories" optionLabel="name [(ngModel)]="selectedSubcategory">
    </p-dropdown>
</div>
</p-dialog>

Upvotes: 1

Related Questions