Merge pull request #7127 from IgniteUI/vmihalkov/fix-7122

fix(splitter): Don't change resizable property on expand/collapse and reset sibling size only if resizable

Author: ChronosSF

projects/igniteui-angular/src/lib/splitter/splitter-bar/splitter-bar.component.ts

@@ -200,7 +200,7 @@ export class IgxSplitBarComponent {
 
     protected get resizeDisallowed() {
         const relatedTabs = this.siblings;
-        return !!relatedTabs.find(x => x.resizable === false);
+        return !!relatedTabs.find(x => x.resizable === false || x.hidden === true);
     }
 
     public onCollapsing(next: boolean) {

projects/igniteui-angular/src/lib/splitter/splitter.component.spec.ts

@@ -297,11 +297,19 @@ describe('IgxSplitter pane toggle', () => {
         const pane1 = splitter.panes.toArray()[0];
         const splitterBarComponent = fixture.debugElement.query(By.css(SPLITTERBAR_CLASS)).context;
 
+        pane1.size = '340';
+        const pane1_originalSize = pane1.size;
+        const splitterBarComponentDebug: DebugElement = fixture.debugElement.query(By.css(SPLITTERBAR_CLASS));
+
         // collapse left sibling pane
         splitterBarComponent.onCollapsing(0);
         fixture.detectChanges();
         expect(pane1.hidden).toBeTruthy();
-        expect(pane1.resizable).toBeFalsy();
+        expect(pane1.resizable).toBeTruthy();
+        splitterBarComponentDebug.nativeElement.focus();
+        UIInteractions.triggerEventHandlerKeyDown('ArrowRight', splitterBarComponentDebug);
+        fixture.detectChanges();
+        expect(pane1.size).toEqual(pane1_originalSize);
 
         splitterBarComponent.onCollapsing(1);
         fixture.detectChanges();

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

@@ -173,9 +173,10 @@ export class IgxSplitterComponent implements AfterContentInit {
             return;
         }
         // reset sibling sizes when pane is collapsed.
-        this._getSiblings(pane).forEach(sibling => sibling.size = 'auto');
+        this._getSiblings(pane).forEach(sibling => { if (sibling.resizable) {
+            sibling.size = 'auto';
+        }});
         pane.hidden = !pane.hidden;
-        pane.resizable = !pane.hidden;
         pane.onPaneToggle.emit(pane);
     }