PrimeNg ConfirmDialog默认选中Yes按钮问题及自定义按钮咨询

Hey there, let's break down why your ConfirmDialog is defaulting to the Yes button, and how you can customize it exactly how you want.

Why is the Yes button focused by default? #

PrimeNG's ConfirmationService has a built-in default behavior: it automatically sets focus to the first action button, which is the one mapped to the accept callback (aka the Yes button). This is intended to speed up confirmation workflows, but for destructive actions like deleting data, it's usually better to focus the cancel button to prevent accidental clicks.

How to change the default focused button #

Option 1: Quick fix with the focus config parameter #

You can directly specify which button gets focus when calling confirm() by adding the focus property. It accepts either 'accept' (default) or 'reject'.

Update your deleteConfirm method in list.component.ts like this:

deleteConfirm(dataSet: any) {
  this.confirmationService.confirm({
    message: 'Do you want to delete this data?',
    header: 'Delete Confirmation',
    icon: 'pi pi-info-circle',
    accept: () => {
      this.listService.deleteItem(dataSet).subscribe({
        next: (res) => {
          this.getItemList();
        },
        error: (err) => {
          console.error(err);
        },
      });
    },
    reject: () => {
      console.log('Rejected!');
    },
    // Set focus to the Cancel/No button instead
    focus: 'reject'
  });
}

This will make the No button get focus as soon as the dialog opens, so the Yes button won't be "selected" by default anymore.

Option 2: Full customization with a templated <p-confirmDialog> #

If you need more control—like changing button labels, reordering buttons, or adding custom buttons—you can use a templated p-confirmDialog component instead of relying solely on the service's config.

Step 1: Add the templated dialog to your HTML

Put this in your list.components.html (anywhere outside the p-card is fine):

<p-confirmDialog #customConfirmDialog [style]="{width: '500px'}">
  <ng-template pTemplate="header">
    <h3>Delete Confirmation</h3>
  </ng-template>
  <ng-template pTemplate="content">
    <p>Are you sure you want to delete this entry? This action can't be undone.</p>
  </ng-template>
  <ng-template pTemplate="footer">
    <!-- Custom buttons: Cancel first (with autofocus), then Delete -->
    <button 
      pButton 
      type="button" 
      label="Cancel" 
      (click)="customConfirmDialog.reject()" 
      class="p-button-secondary"
      autofocus
    ></button>
    <button 
      pButton 
      type="button" 
      label="Delete Permanently" 
      (click)="customConfirmDialog.accept()" 
      class="p-button-danger ml-2"
    ></button>
  </ng-template>
</p-confirmDialog>

Step 2: Update your component class to use the templated dialog

First, import ViewChild and ConfirmDialog, then reference the dialog and adjust your deleteConfirm method:

import { ViewChild } from '@angular/core';
import { ConfirmDialog } from 'primeng/confirmdialog';
import { ConfirmationService } from 'primeng/api';
import { ListService } from './../../Service/list.service';

@Component({
  selector: 'app-list',
  templateUrl: './list.component.html',
  styleUrls: ['./list.component.scss'],
  providers: [ConfirmationService],
})
export class ListComponent implements OnInit {
  data: any;
  @ViewChild('customConfirmDialog') confirmDialog!: ConfirmDialog;

  constructor(
    public listService: ListService,
    private confirmationService: ConfirmationService
  ) {}

  // ... other existing code ...

  deleteConfirm(dataSet: any) {
    this.confirmationService.confirm({
      target: this.confirmDialog.el.nativeElement,
      accept: () => {
        this.listService.deleteItem(dataSet).subscribe({
          next: (res) => {
            this.getItemList();
          },
          error: (err) => {
            console.error(err);
          },
        });
      },
      reject: () => {
        console.log('Deletion cancelled!');
      }
    });
  }
}

Using autofocus on the Cancel button ensures it's focused by default, and you can fully customize button labels, styles, and order here.

Bonus: More customization tips #

• Change button labels without templates: Add acceptLabel and rejectLabel to your confirm() config, e.g., acceptLabel: 'Delete', rejectLabel: 'Cancel'
• Style buttons: Use acceptButtonStyleClass and rejectButtonStyleClass to apply PrimeNG's built-in classes (like p-button-danger) or your own custom CSS classes
• Add more buttons: Only possible with the templated approach—just add more buttons in the footer template and handle their clicks as needed

内容的提问来源于stack exchange，提问作者JBC