bug: Naive Input Radio Button not working as expected

[GuptaAman08]

trafficstars

Prerequisites

• [X] I have read the Contributing Guidelines.
• [X] I agree to follow the Code of Conduct.
• [X] I have searched for existing issues that already report this problem, without success.

Ionic Framework Version

v7.x

Current Behavior

Using ionic-based web app

1. I have a component (child) that is injected into another component (parent).
2. The child component collects feedback from the user.
3. The child component HTML and CSS are as below

child.component.html

<div class="feedback-container d-flex flex-column"
  [ngClass]="{'small-container': !shouldBeLarger, 'h-100': shouldBeLarger}">
  <form class="flex-grow-1 d-flex flex-column" method="post" (submit)="onSubmit()">
    <div>
      <div class="align-items-center d-flex flex-column flex-md-row justify-content-between p-3">
        <div class="d-inline-flex flex-shrink-0 mt-3 mt-md-1 w-100 justify-content-around">
          <label class="ml-lg-4">
            <input type="radio" name="feedback" value="1" required class="feedback-radio"
              [(ngModel)]="formObject.rating">
            <img width="36" height="36" src="assets/img/feedback/smiley-5.svg" class="unselected">
            <img width="36" height="36" src="assets/img/feedback/smiley-5-s.svg" class="selected" [captureEvent]="'click-feedback-rating'">
          </label>
          <label class="ml-4 custom-ml-3-280px">
            <input type="radio" name="feedback" value="2" required class="feedback-radio"
              [(ngModel)]="formObject.rating">
            <img width="36" height="36" src="assets/img/feedback/smiley-4.svg" class="unselected">
            <img width="36" height="36" src="assets/img/feedback/smiley-4-s.svg" class="selected" [captureEvent]="'click-feedback-rating'">
          </label>
          <label class="ml-4 custom-ml-3-280px">
            <input type="radio" name="feedback" value="3" required class="feedback-radio"
              [(ngModel)]="formObject.rating">
            <img width="36" height="36" src="assets/img/feedback/smiley-3.svg" class="unselected">
            <img width="36" height="36" src="assets/img/feedback/smiley-3-s.svg" class="selected" [captureEvent]="'click-feedback-rating'">
          </label>
          <label class="ml-4 custom-ml-3-280px">
            <input type="radio" name="feedback" value="4" required class="feedback-radio"
              [(ngModel)]="formObject.rating">
            <img width="36" height="36" src="assets/img/feedback/smiley-2.svg" class="unselected">
            <img width="36" height="36" src="assets/img/feedback/smiley-2-s.svg" class="selected" [captureEvent]="'click-feedback-rating'">

          </label>
          <label class="ml-4 custom-ml-3-280px">
            <input type="radio" name="feedback" value="5" required class="feedback-radio"
              [(ngModel)]="formObject.rating">
            <img width="36" height="36" src="assets/img/feedback/smiley-1.svg" class="unselected">
            <img width="36" height="36" src="assets/img/feedback/smiley-1-s.svg" class="selected" [captureEvent]="'click-feedback-rating'">
          </label>
        </div>
      </div>
      <div class="mx-3 mt-4">
        <textarea type="text" class="form-control" placeholder="{{'PICKUP_WEBFLOW.RATE_CURBSIDE_PAGE.COMMENT_PLACEHOLDER' | translate}}" name="comment"
          [(ngModel)]="formObject.comment" [ngClass]="{'h-46px': !shouldBeLarger, 'h-146px': shouldBeLarger}">
          </textarea>
      </div>
    </div>
  </form>
</div>

child.component.css

.feedback-container {
  border-radius: 5px;
  text-align: left;

  .title-container {
    padding: 15px;
    border-bottom: 1px solid #cccccc;
    font-size: 16px;
  }

  h2.title {
    font-size: 16px;
    color: #000;
    font-weight: 400;
  }

  .icon {
    padding: 16px;
    text-align: center;
  }

  .btn.btn-primary {
    background-color: var(--primary);
    border-color: var(--primary);
    color: var(--primary-contrast);
    width: 75%;
    font-weight: 300;
    font-size: 14px;
  }

  .submit-button {
    letter-spacing: 2px;
  }

  .feedback-shared {
    width: 100%;
    text-align: center;
    flex: 1 1 auto;

    h3 {
      color: var(--primary);
      font-weight: normal;
      font-size: 18px;
    }

    .cursor-pointer {
      color: var(--primary);
    }
  }

  .feedback-radio ~ .selected {
    display: none;
  }

  .feedback-radio:checked ~ .selected {
    display: initial;
    cursor: default;
  }

  .feedback-radio:checked ~ .unselected {
    display: none;
  }

  .feedback-radio:hover:not(:checked) ~ .selected {
    display: initial;
    cursor: pointer;
  }
  .feedback-radio:hover:not(:checked) ~ .unselected {
    display: none;
  }
}

/* HIDE RADIO */
[type="radio"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.feedback-success {
  border-radius: 50%;
  width: 38px;
  height: 38px;
  background: #ccc;
  position: relative;
  left: 46%;

  & > img {
    margin-top: 10px !important;
  }
}


.h-146px {
  height: 146px !important;
}

@media (max-width: 280px) {
  .feedback-container {
    .custom-ml-3-280px {
      margin-left: 1rem !important;
    }
  }
}

I am facing the following problem on iPhone Safari.Chrome browser rest every other place its working fine may be it android, desktop, etc.

1. When you try to select a check a radio then the associated smile image gets changed or essentially selected.
2. But when we try to click outside elsewhere the smile image gets unselected. Also, the checked attribute of the radio button is false i verified this by assigning an ID to an element and checking the same by document.getElementById (but on the other devices the checked attribute is true).
3. But, Now when you double tap OR click twice on that smile the checked attribute will now be true and hence clicking elsewhere does not makes it unchecked

Expected Behavior

Ideally the first time a user checks the radio the corresponding smile should also get selected as it is behaving correctly on Android and Desktop browsers.

Can Someone please help me understand where is the problem ?? And how to fix it ??

Steps to Reproduce

1. Try to run the above child component HTML and CSS on the iPhone Safari/chrome browser
2. Tap on any of the smiles they should get selected
3. Now, tap elsewhere the selection gets reset.

Code Reproduction URL

Private Repository

Ionic Info

Ionic: Ionic CLI : 6.20.4 (/usr/local/lib/node_modules/@ionic/cli) Ionic Framework : not installed @angular-devkit/build-angular : 15.2.9 @angular-devkit/schematics : 12.1.4 @angular/cli : 15.2.9 @ionic/angular-toolkit : 4.0.0

Capacitor: Capacitor CLI : 3.2.5 @capacitor/android : not installed @capacitor/core : 3.2.5 @capacitor/ios : not installed

Utility: cordova-res : not installed globally native-run (update available: 2.0.1) : 1.5.0

System:

NodeJS : v14.17.3 (/Users/rajivkulkarni/.nvm/versions/node/v14.17.3/bin/node) npm : 6.14.13 OS : macOS

Additional Information

Can Someone please help me understand where is the problem ?? And how to fix it ??

[ionitron-bot[bot]]

Thanks for the issue! This issue has been labeled as needs reproduction. This label is added to issues that need a code reproduction.

Please reproduce this issue in an Ionic starter application and provide a way for us to access it (GitHub repo, StackBlitz, etc). Without a reliable code reproduction, it is unlikely we will be able to resolve the issue, leading to it being closed.

If you have already provided a code snippet and are seeing this message, it is likely that the code snippet was not enough for our team to reproduce the issue.

For a guide on how to create a good reproduction, see our Contributing Guide.

[thetaPC]

Closing this issue due to the lack of response for a minimal reproduction. If you are still experience this issue, please submit a new issue with a repro. Thanks!

[ionitron-bot[bot]]

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.