Merge pull request #14363 from IgniteUI/mdragnev/fix-14039-17.2.x

fix(forof): Do not force setting master on each change. Set new sync master if the old one is not in the DOM

Author: dkamburov

projects/igniteui-angular/src/lib/directives/for-of/for_of.directive.ts

@@ -1621,7 +1621,7 @@ export class IgxGridForOfDirective<T, U extends T[] = T[]> extends IgxForOfDirec
             }
             if (this.igxForScrollOrientation === 'horizontal') {
                 // in case collection has changes, reset sync service
-                this.syncService.setMaster(this, true);
+                this.syncService.setMaster(this, this.igxGridForOfUniqueSizeCache);
             }
         }
         const defaultItemSize = 'igxForItemSize';

projects/igniteui-angular/src/lib/directives/for-of/for_of.sync.service.ts

@@ -21,6 +21,11 @@ export class IgxForOfSyncService {
      */
     public setMaster(directive: IgxGridForOfDirective<any, any[]>, forced = false) {
         const orientation = directive.igxForScrollOrientation;
+        // in case master is not in dom, set a new master
+        const isMasterInDom = this._master.get(orientation)?.dc?.instance?._viewContainer.element.nativeElement.isConnected;
+        if (!isMasterInDom) {
+            forced = true;
+        }
         if (orientation && (forced || !this._master.has(orientation))) {
             this._master.set(orientation, directive);
         }