Radio item not work in Chrome if include ionic.js and ionic-angular.js

ionic-v1
1 
    <html>
  <head>
    <link href="css/ionic.css" rel="stylesheet">
    <script src="js/angular/angular.js"></script>
    <script src="js/angular/angular-animate.js"></script>
    <script src="js/angular/angular-sanitize.js"></script>
    <script src="js/angular-ui/angular-ui-router.js"></script>
    <script src="js/ionic.js"></script>
    <script src="js/ionic-angular.js"></script>
  </head>
  <body>
<div class="list">

        <label class="item item-radio">
          <input type="radio" name="group" value="go" checked="checked">
          <div class="item-content">
            Go
          </div>
          <i class="radio-icon ion-checkmark"></i>
        </label>

        <label class="item item-radio">
          <input type="radio" name="group" value="python">
          <div class="item-content">
            Python
          </div>
          <i class="radio-icon ion-checkmark"></i>
        </label>

        <label class="item item-radio">
          <input type="radio" name="group" value="ruby">
          <div class="item-content">
            Ruby
          </div>
          <i class="radio-icon ion-checkmark"></i>
        </label>

        <label class="item item-radio">
          <input type="radio" name="group" value=".net">
          <div class="item-content">
            .Net
          </div>
          <i class="radio-icon ion-checkmark"></i>
        </label>

        <label class="item item-radio">
          <input type="radio" name="group" value="java">
          <div class="item-content">
            Java
          </div>
          <i class="radio-icon ion-checkmark"></i>
        </label>

        <label class="item item-radio">
          <input type="radio" name="group" value="php">
          <div class="item-content">
            PHP
          </div>
          <i class="radio-icon ion-checkmark"></i>
        </label>
      </div>
</body>
</html>

if comment the

  <!-- <script src="js/ionic.js"></script>
        <script src="js/ionic-angular.js"></script> -->

it worked.

2

There were some problems in a recent earlier version (on clicks not changing the selection, but taps were)

Try taking the latest version (nightly) from http://code.ionicframework.com/ as that has fixed the problem (if this is the problem you are seeing)

3

Thanks for your answer.

I tried the code from the link. it is the same.

Try to trace the click event and comment a line in preventGhostClick

if( isRecentTap(e) ) {
  // a tap has already happened at these coordinates recently, ignore this event
  e.stopPropagation();
    //e.preventDefault();
  return false;
}

it worked.

when click the item, the preventGhostClick receive two events, one for “item-content” another is input, after handle the event from the target “item-content” the selected item is checked, but after handle the event which target to input the selected item unchecked back.

I am new for JS coding, confusing…

4

I have the same issue, once a radio button is selected, other items can not be selected. This is browser only, device build is fine (using phonegap).

I traced it back to this commit

Specifically to the addition of the method preventGhostClick.
I was not sure if the intent was to not support web only views so i added my own workaround only for debugging.

My hack around was to expose in ionic the event listener
document.addEventListener(‘click’, preventGhostClick, true);
ionic.pg = preventGhostClick;

Then in the shim code (to enable phonegap on web )
document.removeEventListener(‘click’, ionic.pg, true);

in my merges directory i override the shim file so device side works as expected.

Will take a look at the preventGhostClick to see if there is a proper fix.

5 
<html>
  <head>
    <link href="css/ionic.css" rel="stylesheet">
    
    <script src="js/angular/angular.js"></script>
    <script src="js/angular/angular-animate.js"></script>
    <script src="js/angular/angular-sanitize.js"></script>
    <script src="js/angular-ui/angular-ui-router.js"></script>
    <script src="js/ionic.js"></script>
    <script src="js/ionic-angular.js"></script>
        
  </head>
  <body>
<div class="list">

        <label class="item item-radio">
          <input type="radio" name="group" value="go">
          <span class="item-content" style="display:inline-block;">
            Go
          </span>
          <i class="radio-icon ion-checkmark"></i>
        </label>

        <label class="item item-radio">
          <input type="radio" name="group" value="python">
          <span class="item-content" style="display:inline-block;">
            Python
          </span>
          <i class="radio-icon ion-checkmark"></i>
        </label>

        <label class="item item-radio">
          <input type="radio" name="group" value="ruby">
          <span class="item-content" style="display:inline-block;">
            Ruby
          </span>
          <i class="radio-icon ion-checkmark"></i>
        </label>

        <label class="item item-radio">
          <input type="radio" name="group" value=".net">
          
          <span class="item-content" style="display:inline-block;">
            .Net
            
          </span>
          <i class="radio-icon ion-checkmark"></i>
        </label>

        <label class="item item-radio">
          <input type="radio" name="group" value="java">
          
          <span class="item-content" style="display:inline-block;">
            Java
            
          </span>
          <i class="radio-icon ion-checkmark"></i>
        </label>

        <label class="item item-radio">
          <input type="radio" name="group" value="php">
          
          <span class="item-content" style="display:inline-block;">
            PHP
          </span>
          <i class="radio-icon ion-checkmark"></i>
        </label>

      </div>
</body>
</html>

Found the root cause is DIV not allowed nested in LABEL. so changed the div (item-content) to span and set display as inline-block. (if set display block, JS capture the first click event target still not LABEL, but SPAN instead.)

6

if div in the label or radio, disable-pointer-events class is needed.