Conflict between ion-input "disabled" and ion-button

Using Ionic 6.0.1, I am trying to have an ion-item that contains both a disabled input and an enabled ion-button. However, adding the disabled flag to the input causes the button to be disabled (although its color remains as if enabled). (Removing disabled from the input, or replacing it with readonly makes the button work again.)

Here is the initial code where I discovered this effect:

      <ion-item>
        <ion-label position="floating">Email pending verification</ion-label>
        <ion-input [value]="user.email_to_be_verified" disabled></ion-input>
        <ion-button slot="end" (click)="saveAccount(true)">
          Cancel
        </ion-button>
      </ion-item>

Here is a refactor I tried, but the behavior was the same:

      <ion-item>
        <div style="display: flex; justify-content: space-between; width: 100%;">
          <div>
            <ion-label position="floating">Email pending verification</ion-label>
            <ion-input [value]="user.email_to_be_verified" disabled></ion-input>
          </div>
          <ion-button color="warning" (click)="saveAccount(true)" [disabled]="false">
            Cancel
          </ion-button>
        </div>
      </ion-item>
2 Likes

use two ion-item tags

  <ion-item>
        <ion-label position="floating">Email pending verification</ion-label>
        <ion-input [value]="user.email_to_be_verified" disabled></ion-input>
      </ion-item>
  <ion-item>
 
      <ion-button slot="end" (click)="saveAccount(true)">
        Cancel
      </ion-button>
    </ion-item>

Hello, do you have any official solution for this? I have the same problem and I’m looking for a solution that doesn’t destroy the html we had, thanks!

Can you file an issue on our GitHub repo? Sign in to GitHub · GitHub