IonRadio display: none can't trigger checked

I create IonRadioGroup with IonRadio and i try to style when i check radio it will change style. But it’s just work when IonRadio not use display: none. When i use display: none it not trigger.

this image i style radio opacity: 0; it work.

radio11277×554 63.2 KB

<IonList>
            <IonText className="cleaning__title">
              How many bathrooms / toilet?
            </IonText>
            <IonRadioGroup
              value={selected}
              onIonChange={(e) => setSelected(e.detail.value)}
            >
              <IonList className="listRadio">
                <IonItem
                  lines="none"
                  className="ion-no-padding ion-no-margin noPad"
                >
                  <IonRadio
                    className="styleRadio"
                    slot="start"
                    value="1 Toilet"
                  />
                  {selected === "1 Toilet" ? (
                    <IonList>
                      <IonImg className="iconRadio showIcon" src={iconCheck} />
                      <IonList className="listRadio__item checkList">
                        <IonLabel className="flexLabelCleaning">
                          <IonLabel className="blueNum">1</IonLabel>Toilet
                        </IonLabel>
                      </IonList>
                    </IonList>
                  ) : (
                    // <IonImg className="iconRadio showIcon" src={iconCheck} />
                    <IonList>
                      <IonImg
                        className="iconRadio hiddenIcon"
                        src={iconCheck}
                      />
                      <IonList className="listRadio__item">
                        <IonLabel className="flexLabelCleaning">
                          <IonLabel>1</IonLabel>Toilet
                        </IonLabel>
                      </IonList>
                    </IonList>
                  )}
                  {/* <IonImg className="iconRadio showIcon" src={iconCheck} />
                   <IonList className="listRadio__item checkList">
                    <IonLabel className="flexLabelCleaning">
                      <IonLabel className="blueNum">1</IonLabel>Toilet
                     </IonLabel>
                   </IonList> */}
                </IonItem>
</IonList>

1 post - 1 participant

Read full topic