Disabled property not working on ion-item-option

[kelvindart]

Bug Report

Ionic version:

[x] 4.1.2

Current behavior:
The disabled attribute seems to be ineffective for ion-item-option. I have tried a couple of different ways to set it (both the property binding, and attribute value), neither of which had any effect.

The button remains enabled, and it can still be clicked.

Expected behavior:
For the button to be disabled and the visible effect of the button to indicate it is disabled.

Steps to reproduce:

1. Create an Ionic v4 app (link to be provided below for reproduction).
2. Create an ion-list with an item containing an ion-item-option with the disabled attribute set to true.
3. Run the app.
4. Slide the item to the left.
5. Observe the button is still enabled.

Related code:

GitHub: https://github.com/kelvindart/ion-item-option_disabled_bug

(Property binding):

</ion-list>
  <ion-item-sliding>
    <ion-item><ion-label>Goldeneye 007 (prop)</ion-label></ion-item>
    <ion-item-options>
      <ion-item-option (click)="doSomething()" [disabled]="true">More</ion-item-option>
    </ion-item-options>
  </ion-item-sliding>
</ion-list>

Or (attribute binding):

</ion-list>
  <ion-item-sliding>
    <ion-item><ion-label>Goldeneye 007 (attr)</ion-label></ion-item>
    <ion-item-options>
      <ion-item-option (click)="doSomething()" disabled="true">More</ion-item-option>
    </ion-item-options>
  </ion-item-sliding>
</ion-list>

Other information:
Looking at the Dev Tools, it appears like the attribute disabled is applied to the underlying button in the shadow DOM for the component.

Live gif:

Ionic info:

Ionic:

   ionic (Ionic CLI)             : 4.12.0 (/Users/kelvindart/.nvm/versions/node/v10.15.3/lib/node_modules/ionic)
   Ionic Framework               : @ionic/angular 4.1.2
   @angular-devkit/build-angular : 0.13.6
   @angular-devkit/schematics    : 7.2.4
   @angular/cli                  : 7.3.6
   @ionic/angular-toolkit        : 1.4.1

System:

   NodeJS : v10.15.3 (/Users/kelvindart/.nvm/versions/node/v10.15.3/bin/node)
   npm    : 6.9.0
   OS     : macOS High Sierra

[brandyscarney]

Thanks for the issue! Confirmed this bug. Looks like there is no disabled class being added to the ion-item-option and no custom styling. It needs to have something similar to fab added:

/* Disabled Button */
:host(.fab-button-disabled) {
  pointer-events: none;
}

:host(.fab-button-disabled) .button-native {
  cursor: default;
  opacity: .5;
  pointer-events: none;
}

[ionitron-bot]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.