Disabling a pInitEditableRow p-button makes it LOOK disabled but doesn't prevent it from being clickable

Issue

I've got a PrimeNG app with a p-button within a cell of each row of a p-table that has a pInitEditableRow property so that when you click on it the table row becomes editable - just like it is supposed to.

So the problem is I don't want it to be editable all the time. I have a condition that sets [disabled] to true and the p-button then LOOKS like it's disabled.

However, when I click on the disabled p-button it still renders the table row editable. When it's disabled I want it to do nothing.

Here's my p-button. I would post more code except that's really all there is to it. If I leave it exactly like it is the button looks disabled but still renders the table row editable.

<p-button  pInitEditableRow icon="pi pi-pencil" [disabled]=true></p-button>

Makes the button LOOK disabled...

But clicking it still renders the row editable...

Thanks much.

Solution

The problem is the pInitEditableRow directive — it binds to the click event of the host and does not respect the disabled attribute. You could, however, display the button with or without the directive based on your condition:

<p-button *ngIf="editEnabled" pInitEditableRow icon="pi pi-pencil"></p-button>
<p-button *ngIf="!editEnabled" icon="pi pi-pencil" [disabled]="true"></p-button>

Alternatively, you could write your own directive that respects the attribute:

@Directive({
  selector: 'p-button[appInitEditableRow]',
  host: { 'class': 'p-element' }
})
export class AppInitEditableRow {
  constructor(
    private readonly table: Table,
    private readonly row: EditableRow,
    private readonly button: Button) {}

  @HostListener('click', ['$event'])
  onClick(event: Event) {
    if (!this.button.disabled) {
      this.table.initRowEdit(this.row.data);
      event.preventDefault();
    }
  }
}

<p-button appInitEditableRow icon="pi pi-pencil" [disabled]="editEnabled"></p-button>

Answered By - skink