Nebular: Nebular nb-radio-groups are not working independently from each other

Created on 10 May 2019  路  4Comments  路  Source: akveo/nebular

Issue type

I'm submitting a ...

  • [x] bug report
  • [ ] feature request

Issue description

Current behavior:
Currently when you have 2 different radio groups(nb-radio-group) and few radios(nb-radio) inside, they are sharable. Selecting a nb-radio from one nb-radio-group will cause all nb-radios from the other nb-radio-group to deselect. This means that we can have only one selected nb-radio, regardless of the nb-radio-group encapsulation.

image

image

Expected behavior:
I am expecting that nb-radio-group are working independently from each other.

Steps to reproduce:
Create two or more nb-radio-group and few nb-radio inside each nb-radio-group. Select any nb-radio from first nb-radio-group then select any nb-radio from other nb-radio-group. Selected nb-radio from the first nb-radio-group will be deselected, which is unexpected.

Related code:

      <div class="demo-radio col-sm-4">
        <nb-radio-group [(value)]="radioGroupValue">
          <nb-radio [value]="'This is value 1'">
            Radio 1
          </nb-radio>
          <nb-radio [value]="'This is value 2'">
            Radio 2
          </nb-radio>
          <nb-radio [value]="'This is value 3'">
            Radio 3
          </nb-radio>
        </nb-radio-group>
      </div>

      <div class="demo-radio col-sm-4">
        <nb-radio-group [(value)]="radioGroupValue2">
          <nb-radio [value]="'This is value 4'">
            Radio 4
          </nb-radio>
          <nb-radio [value]="'This is value 5'">
            Radio 5
          </nb-radio>
          <nb-radio [value]="'This is value 6'">
            Radio 6
          </nb-radio>
        </nb-radio-group>
      </div>

Other information:

npm, node, OS, Browser
npm version: 6.4.1
node version: 10.14.1
Browser: Chrome

Angular, Nebular
```
@angular/core": "^7.0.3"
@nebular/auth": "3.1.0",
@nebular/bootstrap": "3.1.0",
@nebular/security": "3.1.0",
@nebular/theme": "3.1.0",

needs info

Most helpful comment

Hi @StanislavChankov. Looks like the name setting is missing. You can specify it for each option or by setting name for both nb-radio-groups.
nb-radio uses native <input type="checkbox"> under the hood, so they grouped by the name attribute. More on this on MDN.

All 4 comments

Hey guys @nnixaa @yggg ,
can you help me figuring out whether I am doing something wrong or it is not working as expected.

Hi @StanislavChankov. Looks like the name setting is missing. You can specify it for each option or by setting name for both nb-radio-groups.
nb-radio uses native <input type="checkbox"> under the hood, so they grouped by the name attribute. More on this on MDN.

Thank you @yggg ,
This is the way to make it work, but in my case I am adding the nb-radio-group dynamically and setting names. The names get set correctly, but the issue still exists. Do you have any idea?

I had to wrap nb-radio-group controls with formtag.

Was this page helpful?
0 / 5 - 0 ratings