Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Disabled property not working on ion-item-option #17905

kelvindart opened this issue Mar 28, 2019 · 2 comments


2 participants
Copy link

commented Mar 28, 2019

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:


(Property binding):

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

Or (attribute binding):

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

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.

dev tools

Live gif:
sliding item

Ionic info:


   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


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

@ionitron-bot ionitron-bot bot added the triage label Mar 28, 2019


This comment has been minimized.

Copy link

commented Mar 28, 2019

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 ionitron-bot bot removed the triage label Mar 28, 2019

@liamdebeasi liamdebeasi added this to Backlog 🤖 in Ionic Core via automation Mar 28, 2019

Ionic Core automation moved this from Backlog 🤖 to Done 🎉 Mar 28, 2019


This comment has been minimized.

Copy link

commented Apr 27, 2019

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.

@ionitron-bot ionitron-bot bot locked and limited conversation to collaborators Apr 27, 2019

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
You can’t perform that action at this time.