Radio button bug: All options get selected with radiogroup

Ionic Framework ionic-v3
1

Hi,

I am not sure whether I am posting this in the correct section or not, since I am quite new to the forums, but I’ll give it a go. I am trying to build an app with Ionic 2 typescript, but I encountered a bug wich kinda stops me developing the app futher. I’ve added a radio group with four options, when I try to select an option it selects them all, at least visually.

Has anyone else encountered this bug? Would appreciatie the help. You’ll find my html and a screenshot below.

PS: I’ve also tried to create a CodePen example of the bug, but I couldn’t find a Ionic 2 cdn to add to my CodePen en thus create an example. If that is possible, I’d like to know how for future questions.

<ion-content class="detail">
     <ion-card>
         <img src="http://placehold.it/300x250" />
    </ion-card>
    <ion-list radio-group>
         <ion-list-header>
             Options
         </ion-list-header>      
         <ion-radio>
            Option 1
         </ion-radio>
         <ion-radio>
             Option 2
         </ion-radio>
         <ion-radio>
             Option 3
         </ion-radio>
         <ion-radio>
            Option 4
        </ion-radio>
    </ion-list>
</ion-content>

image
example-ionic2-bug.png455×789 15.3 KB

2

Have you tried the Ionic 2 doc example?

Also, it seems there still a little bug to resolve. See here

By the way, how did you do the bottom tool bar? I like the way it is displayed.

3

I have used the Ionic 2 doc example yes. Seems to working just fine in the docs, but when I try to use in my app I get the bug descriped. FYI => I’ve tried the basic usage example and the example docs here.

I’ll take a look in the topic you’ve linked. As for the bottom bar. I took my inspiration from the Ionic 2 doc example for the fab button. See here. As you can see the bottom button in the example also has a bottom toolbar.

4

You posted in the right place. :slight_smile: It seems the radio component is expecting a value for each radio, and when it doesn’t exist it doesn’t know how to select the one you clicked. If you can add a value to each radio (for now) it should work the way you want, but I created an issue for this.

<ion-list radio-group>
   <ion-list-header>
       Options
   </ion-list-header>
   <ion-radio value="1">
      Option 1
   </ion-radio>
   <ion-radio value="2">
       Option 2
   </ion-radio>
   <ion-radio value="3">
       Option 3
   </ion-radio>
   <ion-radio value="4">
      Option 4
  </ion-radio>
</ion-list>

https://github.com/driftyco/ionic2/issues/843

The docs are sometimes not up-to-date with the latest release since they have to be manually updated. We’re working on fixing this.

5

Hi,

Thank you for your answer! I´ve added the values as you mentioned. It indeeds stops selecting all the values when clicking one. But it still aint working as it should.

When I click an option, no matter wich option, it visually selects the last option available in the radio button group. As you can see in my screenshot

image

This is the HTML used.

<ion-list radio-group>
    <ion-list-header>
        Options
    </ion-list-header>
    <ion-radio value="1">
        Option 1
    </ion-radio>
    <ion-radio value="2">
        Option 2
    </ion-radio>
    <ion-radio value="3">
        Option 3
    </ion-radio>
    <ion-radio value="4">
        Option 4
    </ion-radio>
</ion-list>

As you can see I have four options. Looking at the console logs in visible I have not clicked option 4 but it is still selected.

image
consolelog.png826×159 14.5 KB

When I click a different option, the console log still registers that I’ve clicked another option.Only it doesn’t change the options visually.

EDIT: @brandyshea Do you have a Ionic 2 CDN available, so I can create CodePen examples in the future?

6

Sorry about that. I was testing it on master instead of using alpha.45. Unfortunately that seems to be a bug with the latest release that has been fixed on master, but not released yet. There are some related issues here:

https://github.com/driftyco/ionic2/issues/842
https://github.com/driftyco/ionic2/issues/819

I’m pushing to release on Monday if we don’t have any roadblocks.

We don’t have a CDN available right now, it’s something we’re actively discussing adding.

7

Has this bug been really solved. I have the same problem in the new ionic 2 RC release.

It seems ngModel still not working.

This is my code.

<ion-list raido-group [(ngModel)]="shopCategory" (ionChange)="changeShopCategory()" ngDefaultControl>
  <ion-item>
    <ion-label>Food</ion-label>
    <ion-radio value="Food" (ionSelect)="selectCategory()"></ion-radio>
  </ion-item>
  <ion-item>
    <ion-label>Professional</ion-label>
    <ion-radio value="Professional" (ionSelect)="selectCategory()"></ion-radio>
  </ion-item>
  <ion-item>
    <ion-label>Recreation</ion-label>
    <ion-radio value="Recreation" (ionSelect)="selectCategory()"></ion-radio>
  </ion-item>
</ion-list>
8

This must be the old thread, but I am experiencing the same problem with Ionic 4