Merge pull request #6235 from IgniteUI/rkaraivanov/radio-group-fix

fix(igx-radio): Initial selection with falsy values

Author: kdinev

projects/igniteui-angular/src/lib/directives/radio/radio-group.directive.spec.ts

@@ -13,7 +13,8 @@ describe('IgxRadioGroupDirective', () => {
             declarations: [
                 RadioGroupComponent,
                 RadioGroupWithModelComponent,
-                RadioGroupReactiveFormsComponent
+                RadioGroupReactiveFormsComponent,
+                RadioGroupDeepProjectionComponent
             ],
             imports: [
                 IgxRadioModule,
@@ -182,6 +183,16 @@ describe('IgxRadioGroupDirective', () => {
         expect(fixture.componentInstance.newModel.name).toEqual(fixture.componentInstance.model.name);
         expect(fixture.componentInstance.newModel.favoriteSeason).toEqual(fixture.componentInstance.seasons[0]);
     }));
+
+    it('Properly initialize selection when value is falsy in deep content projection', fakeAsync(() => {
+        const fixture = TestBed.createComponent(RadioGroupDeepProjectionComponent);
+        fixture.detectChanges();
+        tick();
+
+        const radioGroup = fixture.componentInstance.radioGroup;
+        expect(radioGroup.value).toEqual(0);
+        expect(radioGroup.radioButtons.first.checked).toEqual(true);
+    }));
 });
 
 @Component({
@@ -272,3 +283,33 @@ class RadioGroupReactiveFormsComponent {
         });
     }
 }
+
+@Component({
+    template: `
+        <form [formGroup]="group1">
+            <igx-radio-group formControlName="favouriteChoice" name="radioGroupReactive">
+                <div *ngFor="let choice of choices">
+                    <p><igx-radio [value]="choice">{{ choice }}</igx-radio></p>
+                </div>
+            </igx-radio-group>
+        </form>
+    `
+})
+class RadioGroupDeepProjectionComponent {
+
+    @ViewChild(IgxRadioGroupDirective, { static: true })
+    radioGroup: IgxRadioGroupDirective;
+
+    choices = [0, 1, 2];
+    group1: FormGroup;
+
+    constructor(private _builder: FormBuilder) {
+        this._createForm();
+    }
+
+    private _createForm() {
+        this.group1 = this._builder.group({
+            favouriteChoice: 0
+        });
+    }
+}

projects/igniteui-angular/src/lib/directives/radio/radio-group.directive.ts

@@ -35,6 +35,7 @@ let nextId = 0;
  * ```
  */
 @Directive({
+    exportAs: 'igxRadioGroup',
     selector: 'igx-radio-group, [igxRadioGroup]',
     providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: IgxRadioGroupDirective, multi: true }]
 })
@@ -46,7 +47,7 @@ export class IgxRadioGroupDirective implements AfterContentInit, ControlValueAcc
      * ```
      * @memberof IgxRadioGroupDirective
      */
-    @ContentChildren(IgxRadioComponent) public radioButtons: QueryList<IgxRadioComponent>;
+    @ContentChildren(IgxRadioComponent, { descendants: true }) public radioButtons: QueryList<IgxRadioComponent>;
 
     /**
      * Sets/gets the `value` attribute.
@@ -258,13 +259,11 @@ export class IgxRadioGroupDirective implements AfterContentInit, ControlValueAcc
      */
     private _initRadioButtons() {
         if (this.radioButtons) {
+            const props = { name: this._name, labelPosition: this._labelPosition, disabled: this._disabled, required: this._required };
             this.radioButtons.forEach((button) => {
-                button.name = this._name;
-                button.labelPosition = this._labelPosition;
-                button.disabled = this._disabled;
-                button.required = this._required;
+                Object.assign(button, props);
 
-                if (this._value && button.value === this._value) {
+                if (button.value === this._value) {
                     button.checked = true;
                     this._selected = button;
                 }

projects/igniteui-angular/src/lib/radio/radio.component.html

@@ -11,8 +11,8 @@
     [attr.aria-label]="ariaLabel"
     (click)="_onRadioClick($event)"
     (change)="_onRadioChange($event)"
-    (focus)="onFocus($event)"
-    (blur)="onBlur($event)" />
+    (focus)="onFocus()"
+    (blur)="onBlur()" />
 
 <label #nativeLabel class="igx-radio__composite" igxRipple
     igxRippleTarget=".igx-radio__ripple"

projects/igniteui-angular/src/lib/radio/radio.component.ts

@@ -330,13 +330,13 @@ export class IgxRadioComponent implements ControlValueAccessor, EditorProvider {
     /**
      *@hidden
      */
-    public onFocus(event) {
+    public onFocus() {
         this.focused = true;
     }
     /**
      *@hidden
      */
-    public onBlur(event) {
+    public onBlur() {
         this.focused = false;
         this._onTouchedCallback();
     }

src/app/radio/radio.sample.css

@@ -6,3 +6,22 @@
     padding: 6px;
 }
 
+.promotion {
+    opacity: .75;
+    margin: .5rem;
+}
+
+.promotion-selected {
+    opacity: 1;
+    animation: promo-selected 500ms cubic-bezier(0.19, 1, 0.22, 1);
+}
+
+
+@keyframes promo-selected {
+    50% {
+        transform: translateY(5%) scale(1.05, 1.05);
+    }
+    100% {
+        transform: none;
+    }
+}

src/app/radio/radio.sample.html

@@ -2,6 +2,44 @@
     <app-page-header title="Radio Group">
         Demonstrates a group of radio buttons.
     </app-page-header>
+    <section class="sample-content">
+        <article class="sample-column">
+            <igx-radio-group #group="igxRadioGroup" [(ngModel)]="initial">
+                <div igxLayout>
+                    <igx-card class="promotion" layout="justify" *ngFor="let opt of options"
+                        [type]="group.value != opt ? 'outlined' : 'default'"
+                        [class.promotion-selected]="group.value == opt">
+                        <igx-card-header>
+                            <h6>Reserve your dream vacation at {{ opt }}</h6>
+                        </igx-card-header>
+                        <igx-divider></igx-divider>
+                        <igx-card-content>
+                            <p>
+                                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
+                                labore et dolore magna
+                                aliqua. Elit pellentesque habitant morbi tristique senectus et netus et. Aliquet bibendum
+                                enim facilisis gravida. Rutrum
+                                tellus pellentesque eu tincidunt tortor aliquam nulla. Amet consectetur adipiscing elit
+                                pellentesque habitant morbi
+                                tristique. Massa placerat duis ultricies lacus sed. In ornare quam viverra orci sagittis.
+                                Pulvinar elementum integer
+                                enim neque volutpat ac tincidunt. At in tellus integer feugiat scelerisque. Adipiscing vitae
+                                proin sagittis nisl rhoncus
+                                mattis rhoncus urna neque. Proin sagittis nisl rhoncus mattis rhoncus urna neque viverra.
+                            </p>
+                        </igx-card-content>
+                        <igx-divider></igx-divider>
+                        <igx-card-actions layout="justify">
+                            <button igxRipple igxButton="outlined" [disabled]="group.value != opt">Reserve item
+                                {{ opt }}</button>
+                            <igx-radio [value]="opt">Pick choice {{ opt }}</igx-radio>
+                        </igx-card-actions>
+                    </igx-card>
+                </div>
+            </igx-radio-group>
+            <p>Selected: {{ initial }}</p>
+        </article>
+    </section>
     <section class="sample-content">
         <article class="sample-column">
             <h4 class="sample-title">Radio group without data model</h4>
@@ -48,15 +86,11 @@ <h4 class="sample-title">Radio group in reactive form</h4>
                     <input formControlName="name">
                 </label>
                 <br>
-                <!-- TODO: igx-radio-group is not working properly when hosted in label element
-                When the radio button label is clicked a click event on the first item is triggered -->
-                <!-- <label>Favorite Season -->
                     <igx-radio-group formControlName="favoriteSeason" name="radioGroupReactive">
                         <igx-radio class="radio-sample" *ngFor="let item of seasons" value="{{item}}">
                             {{item}}
                         </igx-radio>
                     </igx-radio-group>
-                <!-- </label> -->
                 <br>
                 <button igxButton type="button" (click)="onUpdateBtnClick($event)" style="width: 200px">Update model</button>
             </form>

src/app/radio/radio.sample.ts

@@ -22,6 +22,9 @@ export class RadioSampleComponent implements AfterContentInit {
 
     selectedValue: any;
 
+    options = [0, 1, 2, 3, 4];
+    initial = this.options[0];
+
     seasons = [
         'Winter',
         'Spring',