How to prevent all the childs inside an ion-item got disable when the ion-select (located in that ion-item) is disable programmatically?

Ionic Framework
1

In the HTML view I have this ion-list with ion-items

  <form [formGroup]="myDetailsForm">
    <ion-list class="ion-list-custom">
      <ion-item class="validate-field" lines="full">
        <ion-label
          class="item-label avn-roboto-regular avn-label"
          position="fixed"
          id="state-label"
          >State</ion-label
          >
          <ion-select name="state" formControlName="state" id="state-select">
            <ion-select-option *ngFor="let state of states" [value]="state.code"
              >{{ state.code }}</ion-select-option
            >
          </ion-select>
          <button
            ion-button
            clear
            type="button"
            (click)="showError('state', $event)"
            class="field-error-img-btn"
            item-right
            *ngIf="myDetailsForm.get('state').invalid"
          >
            <img
              class="field-error-img"
              src="assets/imgs/card_error.png"
              id="state-validate"
              alt="State error"
            />
          </button>
      </ion-item>
    </ion-list>
  </form>

It is being declare like this

    this.myDetailsForm = this.formBuilder.group({
      state: [
        {
          value: this.accountDetails.mailingAddress.state,
          disabled: this.anotherAddress || !this.isAddressEditable,
        },
      ],
    });

One of the ion-item has a ion-select which is being disable as the code below

      this.myDetailsForm.get('state')?.disable();

When the ion-select is disabled, it disable the whole ion-item, which shows the ion-label disable as well.
How can I prevent this?

2

You can add some CSS like this.

<style>
ion-select.select-disabled {
  opacity: 1;
}
ion-select.select-disabled::part(container),
ion-select.select-disabled::part(icon) {
  opacity: 0.38;
}
</style>

image

3

Thanks a lot for your answer @twestrick
Nevertheless, I updated the HTML code and used a plain string instead of an ion-input inside the ion-label
So the ion-label would be like this

<ion-label
          class="item-label avn-roboto-regular avn-label"
          position="fixed"
          id="state-label"
          >State</ion-label
          >

Your solution doesn’t appear to be affected by this change, so I’ll give it a try anyways

4

Unfortunately it didn’t work. The main issue is that the ion-item is being disable when programmatically I’m disabling only the ion-select. So the CSS change didn’t make any difference

As you can see in this image, the ion-select got disable, which make the label look disable as well
image

image

5

Ah, you are using the Legacy syntax for labels. The CSS I provided is for the Modern syntax. Can you change your syntax to Modern? See ion-select: Select One or Multiple Value Boxes or Placeholders.

1 Like