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

@@ -195,6 +195,24 @@ describe('IgxRadioGroupDirective', () => {
         expect(radioGroup.radioButtons.first.checked).toEqual(true);
     }));
 
+    it('Properly rebind dynamically added components', fakeAsync(() => {
+        const fixture = TestBed.createComponent(RadioGroupDeepProjectionComponent);
+        const radioInstance = fixture.componentInstance.radioGroup;
+        fixture.detectChanges();
+        tick();
+
+        fixture.componentInstance.choices = [ 0, 1, 4, 7 ];
+        fixture.detectChanges();
+        tick();
+
+        radioInstance.radioButtons.last.nativeLabel.nativeElement.click();
+        fixture.detectChanges();
+        tick();
+
+        expect(radioInstance.value).toEqual(7);
+        expect(radioInstance.selected).toEqual(radioInstance.radioButtons.last);
+    }));
+
     it('Updates checked radio button correctly', fakeAsync(() => {
         const fixture = TestBed.createComponent(RadioGroupSimpleComponent);
         fixture.detectChanges();

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

@@ -4,7 +4,7 @@ import {
 } from '@angular/core';
 import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
 import { noop, Subject } from 'rxjs';
-import { takeUntil } from 'rxjs/operators';
+import { startWith, takeUntil } from 'rxjs/operators';
 import { mkenum } from '../../core/utils';
 import { IChangeRadioEventArgs, IgxRadioComponent, RadioLabelPosition } from '../../radio/radio.component';
 import { IgxRippleModule } from '../ripple/ripple.directive';
@@ -291,6 +291,11 @@ export class IgxRadioGroupDirective implements AfterContentInit, ControlValueAcc
      * @internal
      */
     private destroy$ = new Subject<boolean>();
+    /**
+     * @hidden
+     * @internal
+     */
+    private queryChange$ = new Subject();
 
     /**
      * @hidden
@@ -301,8 +306,9 @@ export class IgxRadioGroupDirective implements AfterContentInit, ControlValueAcc
         // the OnInit of the NgModel occurs after the OnInit of this class.
         this._isInitialized = true;
 
-        setTimeout(() => {
-            this._initRadioButtons();
+        this.radioButtons.changes.pipe(startWith(0), takeUntil(this.destroy$)).subscribe(() => {
+            this.queryChange$.next();
+            setTimeout(() => this._initRadioButtons());
         });
     }
 
@@ -390,7 +396,11 @@ export class IgxRadioGroupDirective implements AfterContentInit, ControlValueAcc
                     this._selected = button;
                 }
 
-                button.change.pipe(takeUntil(this.destroy$)).subscribe((ev) => this._selectedRadioButtonChanged(ev));
+                button.change.pipe(
+                    takeUntil(button.destroy$),
+                    takeUntil(this.destroy$),
+                    takeUntil(this.queryChange$)
+                ).subscribe((ev) => this._selectedRadioButtonChanged(ev));
             });
         }
     }

projects/igniteui-angular/src/lib/grids/grid-navigation.service.ts

@@ -144,8 +144,12 @@ export class IgxGridNavigationService {
             if (shouldClearSelection || (this.grid.cellSelection !== GridSelectionMode.multiple)) {
                 this.grid.clearCellSelection();
                 this.grid.navigateTo(this.activeNode.row, this.activeNode.column, (obj) => {
-                    obj.target?.activate(event);
-                    this.grid.cdr.detectChanges();
+                    if(this.activeNode.row === obj.target.row.index) {
+                        obj.target?.activate(event);
+                        this.grid.cdr.detectChanges();
+                    } else {
+                        this.grid.navigateTo(this.activeNode.row, this.activeNode.column);
+                    }
                 });
             } else {
                 const range = {

projects/igniteui-angular/src/lib/grids/grid/grid-cell-selection.spec.ts

@@ -461,11 +461,13 @@ describe('IgxGrid - Cell selection #grid', () => {
     describe('API', () => {
         let fix;
         let grid;
+        let detect;
 
         beforeEach(fakeAsync(/** height/width setter rAF */() => {
             fix = TestBed.createComponent(SelectionWithScrollsComponent);
             fix.detectChanges();
             grid = fix.componentInstance.grid;
+            detect = () => grid.cdr.detectChanges();
         }));
 
         it('Should select a single cell', () => {
@@ -858,6 +860,60 @@ describe('IgxGrid - Cell selection #grid', () => {
             expect(selectedData[0]).toEqual({ Name: 'Monica Reyes' });
             expect(selectedData[1]).toEqual({ ID: 957 });
         });
+
+        it('rangeSelected event should be emitted when pointer leaves active state outside grid\'s cells', () => {
+            const selectionChangeSpy = spyOn<any>(grid.rangeSelected, 'emit').and.callThrough();
+            const startCell = grid.gridAPI.get_cell_by_index(2, 'ParentID');
+            const range = { rowStart: 2, rowEnd: 3, columnStart: 0, columnEnd: 1 };
+
+            UIInteractions.simulatePointerOverElementEvent('pointerdown', startCell.nativeElement);
+            detect();
+
+            expect(startCell.active).toBe(true);
+
+            for (let i = 3; i < 5; i++) {
+                const cell = grid.gridAPI.get_cell_by_index(i, grid.columnList.get(i - 1).field);
+                UIInteractions.simulatePointerOverElementEvent('pointerenter', cell.nativeElement);
+            }
+
+            for (let i = 3; i >= 0; i--) {
+                const cell = grid.gridAPI.get_cell_by_index(i, 'HireDate');
+                UIInteractions.simulatePointerOverElementEvent('pointerenter', cell.nativeElement);
+            }
+
+            for (let i = 2; i >= 0; i--) {
+                const cell = grid.gridAPI.get_cell_by_index(0, grid.columnList.get(i).field);
+                UIInteractions.simulatePointerOverElementEvent('pointerenter', cell.nativeElement);
+            }
+
+            for (let i = 1; i < 4; i++) {
+                const cell = grid.gridAPI.get_cell_by_index(i, 'ID');
+                UIInteractions.simulatePointerOverElementEvent('pointerenter', cell.nativeElement);
+            }
+
+            UIInteractions.simulatePointerOverElementEvent('pointerup', document.body);
+            detect();
+
+            expect(selectionChangeSpy).toHaveBeenCalledTimes(1);
+            expect(selectionChangeSpy).toHaveBeenCalledWith(range);
+        });
+
+        it('Should not throw an error when trying to do a drag selection that is started outside the grid', fakeAsync(() => {
+            let cell = grid.gridAPI.get_cell_by_index(1, 'ParentID');
+
+            UIInteractions.simulatePointerOverElementEvent('pointerdown', document.body);
+            tick();
+            fix.detectChanges();
+
+            UIInteractions.simulatePointerOverElementEvent('pointerenter', cell.nativeElement);
+            UIInteractions.simulatePointerOverElementEvent('pointerup', cell.nativeElement);
+            tick();
+            fix.detectChanges();
+
+            expect(() => {
+                fix.detectChanges();
+            }).not.toThrow();
+        }));
     });
 
     describe('Keyboard navigation', () => {

projects/igniteui-angular/src/lib/grids/selection/selection.service.ts

@@ -40,6 +40,7 @@ export class IgxGridSelectionService {
     private pointerEventInGridBody = false;
 
     private allRowsSelected: boolean;
+    private _lastSelectedNode: ISelectionNode;
     private _ranges: Set<string> = new Set<string>();
     private _selectionRange: Range;
 
@@ -179,6 +180,8 @@ export class IgxGridSelectionService {
      * and the start node of the `state`.
      */
     public generateRange(node: ISelectionNode, state?: SelectionState): GridSelectionRange {
+        this._lastSelectedNode = node;
+
         if (!state) {
             return {
                 rowStart: node.row,
@@ -311,8 +314,8 @@ export class IgxGridSelectionService {
         return true;
     }
 
-    public pointerUp(node: ISelectionNode, emitter: EventEmitter<GridSelectionRange>): boolean {
-        if (this.dragMode) {
+    public pointerUp(node: ISelectionNode, emitter: EventEmitter<GridSelectionRange>, firedOutsideGrid?: boolean): boolean {
+        if (this.dragMode || firedOutsideGrid) {
             this.restoreTextSelection();
             this.addRangeMeta(node, this.pointerState);
             this.mergeMap(this.selection, this.temp);
@@ -751,8 +754,13 @@ export class IgxGridSelectionService {
         return this.grid.gridAPI.row_deleted_transaction(rowID);
     }
 
-    private pointerOriginHandler = () => {
+    private pointerOriginHandler = (event) => {
         this.pointerEventInGridBody = false;
         document.body.removeEventListener('pointerup', this.pointerOriginHandler);
+
+        const targetTagName = event.target.tagName.toLowerCase();
+        if (targetTagName !== 'igx-grid-cell' && targetTagName !== 'igx-tree-grid-cell') {
+            this.pointerUp(this._lastSelectedNode, this.grid.rangeSelected, true);
+        }
     };
 }

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

@@ -3,11 +3,12 @@ import {
     HostBinding,
     HostListener,
     Input,
+    OnDestroy,
     Output,
     ViewChild
 } from '@angular/core';
 import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
-import { noop } from 'rxjs';
+import { noop, Subject } from 'rxjs';
 import { EditorProvider } from '../core/edit-provider';
 import { IBaseEventArgs, mkenum } from '../core/utils';
 
@@ -47,9 +48,16 @@ let nextId = 0;
     selector: 'igx-radio',
     templateUrl: 'radio.component.html'
 })
-export class IgxRadioComponent implements ControlValueAccessor, EditorProvider {
+export class IgxRadioComponent implements ControlValueAccessor, EditorProvider, OnDestroy {
     private static ngAcceptInputType_required: boolean | '';
     private static ngAcceptInputType_disabled: boolean | '';
+
+    /**
+     * @hidden
+     * @internal
+     */
+    public destroy$ = new Subject<boolean>();
+
     /**
      * Returns reference to native radio element.
      * ```typescript
@@ -333,6 +341,15 @@ export class IgxRadioComponent implements ControlValueAccessor, EditorProvider {
 
     constructor(private cdr: ChangeDetectorRef) { }
 
+    /**
+     * @hidden
+     * @internal
+     */
+     public ngOnDestroy(): void {
+        this.destroy$.next(true);
+        this.destroy$.complete();
+    }
+
      /**
      * @hidden
      * @internal