diff --git a/projects/igniteui-angular/src/lib/splitter/splitter.component.spec.ts b/projects/igniteui-angular/src/lib/splitter/splitter.component.spec.ts index 07e6dabb7b5..3b21d0a5655 100644 --- a/projects/igniteui-angular/src/lib/splitter/splitter.component.spec.ts +++ b/projects/igniteui-angular/src/lib/splitter/splitter.component.spec.ts @@ -21,7 +21,7 @@ describe('IgxSplitter', () => { }).compileComponents())); let fixture: ComponentFixture; let splitter: IgxSplitterComponent; - + beforeEach(waitForAsync(() => { fixture = TestBed.createComponent(SplitterTestComponent); fixture.detectChanges(); @@ -462,6 +462,75 @@ describe('IgxSplitter pane collapse', () => { }); }); +describe('IgxSplitter resizing with minSize and browser window is shrinked', () => { + configureTestSuite(); + beforeAll(waitForAsync(() => TestBed.configureTestingModule({ + imports: [ + SplitterMinSiezComponent + ] + }).compileComponents())); + + let fixture; let splitter; + beforeEach(waitForAsync(() => { + fixture = TestBed.createComponent(SplitterMinSiezComponent); + fixture.detectChanges(); + splitter = fixture.componentInstance.splitter; + })); + + it('should set the correct sizes when the user drags one pane to the end of another', () => { + const pane1 = splitter.panes.toArray()[0]; + const pane2 = splitter.panes.toArray()[1]; + const splitterBarComponent = fixture.debugElement.query(By.css(SPLITTERBAR_CLASS)).context; + const minSize = parseInt(pane1.minSize); + spyOn(splitter, 'onMoveEnd').and.callThrough(); + + pane1.size = (splitter.getTotalSize() - parseInt(pane2.size)) + 'px'; + fixture.detectChanges(); + + splitterBarComponent.moveStart.emit(pane1); + fixture.detectChanges(); + splitterBarComponent.movingEnd.emit(splitter.getTotalSize() -minSize); + fixture.detectChanges(); + + splitter.elementRef.nativeElement.style.width = '500px'; + pane2.size = (splitter.getTotalSize() - minSize) + 'px'; + fixture.detectChanges(); + + splitterBarComponent.moveStart.emit(pane1); + fixture.detectChanges(); + splitterBarComponent.movingEnd.emit(-400); + fixture.detectChanges(); + + const isFullSize = pane1.size === '100%' || pane1.size === (splitter.getTotalSize() + 'px'); + + expect(splitter.onMoveEnd).toHaveBeenCalled(); + expect(isFullSize).toBeTruthy(); + }); +}); + +@Component({ + template: ` + + +
+ Pane 1 +
+
+ +
+ Pane 2 +
+
+
+ `, + standalone: true, + imports: [IgxSplitterComponent, IgxSplitterPaneComponent] +}) +export class SplitterMinSiezComponent { + @ViewChild(IgxSplitterComponent, { static: true }) + public splitter: IgxSplitterComponent; +} + @Component({ template: ` diff --git a/projects/igniteui-angular/src/lib/splitter/splitter.component.ts b/projects/igniteui-angular/src/lib/splitter/splitter.component.ts index ca1f7f15878..cf4dc267c46 100644 --- a/projects/igniteui-angular/src/lib/splitter/splitter.component.ts +++ b/projects/igniteui-angular/src/lib/splitter/splitter.component.ts @@ -239,7 +239,15 @@ export class IgxSplitterComponent implements AfterContentInit { } public onMoveEnd(delta: number) { - const [ paneSize, siblingSize ] = this.calcNewSizes(delta); + let [ paneSize, siblingSize ] = this.calcNewSizes(delta); + + if (paneSize + siblingSize > this.getTotalSize() && delta < 0) { + paneSize = this.getTotalSize(); + siblingSize = 0; + } else if(paneSize + siblingSize > this.getTotalSize() && delta > 0) { + paneSize = 0; + siblingSize = this.getTotalSize(); + } if (this.pane.isPercentageSize) { // handle % resizes