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 posts - 2 participants

Read full topic