Primeng ConfirmDialog 'Yes' button is pre-selected

Question

My p-confirmDialog has the pre-selected 'Yes' button by default.. I have no idea why. Additionally, I wonder how to customize the default buttons in any PrimeNg dialogs.

Can you please help me out?

Here is my code:

<list.components.html>

  <p-card>
    <div>
      <p-table [value]="data">
        <ng-template pTemplate="header">
          <tr>
            <th>Name</th>
            <th>Description</th>
            <th>Action</th>
          </tr>
        </ng-template>
        <ng-template pTemplate="body" let-dataSet>
          <tr>
            <td>
              <a href="{{ dataSet.URL }}" target="_blank">{{
                dataSet.Name
              }}</a>
            </td>
            <td>{{ dataSet.Description }}</td>
            <td>
              <button
                pButton
                pRipple
                type="button"
                (click)="openDialog(dataSet)"
                style="color: white"
              >
                <fa-icon [icon]="editIcon" class="icon"></fa-icon>
              </button>
              <button
                pButton
                pRipple
                type="button"
                (click)="deleteConfirm(dataSet)"
                style="color: darkred"
              >
                <fa-icon [icon]="deleteIcon"></fa-icon>
              </button>
            </td>
          </tr>
        </ng-template>
      </p-table>
    </div>
  </p-card>

<list.component.ts>

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;

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

  ngOnInit() {}

  getItemList() {
    this.subscription = this.listService.getItems().subscribe({
      next: (res) => {
        this.data = res;
      },
      error: (err) => {
        console.error(err);
      },
    });
  }


  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!');
      },
    });
  }

}

Here is the result of the confirmation dialog with the pre-selected 'yes' button :

Answer 1

try set the property "defaultFocus"

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

}