feat(splitter): Allow expand/collapse with keyboard #6639

Author: Vasil Mihalkov

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

@@ -107,43 +107,66 @@ export class IgxSplitBarComponent {
     private sibling!: IgxSplitterPaneComponent;
 
     /**
-    * @hidden
-    * @internal
-    */
+     * @hidden
+     * @internal
+     */
     @HostListener('keydown', ['$event'])
     keyEvent(event: KeyboardEvent) {
         const key = event.key.toLowerCase();
+        const ctrl = event.ctrlKey;
         event.stopPropagation();
-        if (this.pane.resizable && this.siblings[0].resizable) {
             switch (key) {
                 case 'arrowup':
                     if (this.type === 1) {
-                        event.preventDefault();
-                        this.moveUpOrLeft();
+                        if (ctrl) {
+                            this.pane.hidden ? this.onCollapsing(true) : this.onCollapsing(false);
+                            break;
+                        }
+                        if (this.pane.resizable && this.siblings[1].resizable) {
+                            event.preventDefault();
+                            this.moveUpOrLeft();
+                        }
                     }
                     break;
                 case 'arrowdown':
                     if (this.type === 1) {
-                        event.preventDefault();
-                        this.moveDownOrRight();
+                        if (ctrl) {
+                            this.siblings[1].hidden ? this.onCollapsing(false) : this.onCollapsing(true);
+                            break;
+                        }
+                        if (this.pane.resizable && this.siblings[1].resizable) {
+                            event.preventDefault();
+                            this.moveDownOrRight();
+                        }
                     }
                     break;
                 case 'arrowleft':
                     if (this.type === 0) {
-                        event.preventDefault();
-                        this.moveUpOrLeft();
+                        if (ctrl) {
+                            this.pane.hidden ? this.onCollapsing(true) : this.onCollapsing(false);
+                            break;
+                        }
+                        if (this.pane.resizable && this.siblings[1].resizable) {
+                            event.preventDefault();
+                            this.moveUpOrLeft();
+                        }
                     }
                     break;
                 case 'arrowright':
                     if (this.type === 0) {
-                        event.preventDefault();
-                        this.moveDownOrRight();
+                        if (ctrl) {
+                            this.siblings[1].hidden ? this.onCollapsing(false) : this.onCollapsing(true);
+                            break;
+                        }
+                        if (this.pane.resizable && this.siblings[1].resizable) {
+                            event.preventDefault();
+                            this.moveDownOrRight();
+                        }
                     }
                     break;
                 default:
                     break;
             }
-        }
     }
 
     public get nextButtonHidden() {
@@ -216,7 +239,7 @@ export class IgxSplitBarComponent {
     }
 
     private panesInitialization() {
-        this.sibling = this.siblings[0];
+        this.sibling = this.siblings[1];
 
         const paneRect = this.pane.element.getBoundingClientRect();
         this.initialPaneSize = this.type === SplitterType.Horizontal ? paneRect.width : paneRect.height;
@@ -230,7 +253,7 @@ export class IgxSplitBarComponent {
             this.sibling.size = this.type === SplitterType.Horizontal ? siblingRect.width : siblingRect.height;
         }
     }
-    
+
     public onCollapsing(next: boolean) {
         const prevSibling = this.siblings[0];
         const nextSibling = this.siblings[1];

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

@@ -191,6 +191,52 @@ describe('IgxSplitter', () => {
         expect(parseFloat(pane2.size)).toBeCloseTo(pane2_originalSize - 10, 0);
     });
 
+    fit('should allow expand/collapse with Ctrl + up/down arrow keys', () => {
+        fixture.componentInstance.type = SplitterType.Vertical;
+        fixture.detectChanges();
+        const pane1 =  splitter.panes.toArray()[0];
+        const pane2 = splitter.panes.toArray()[1];
+        expect(pane1.size).toBe('auto');
+        expect(pane2.size).toBe('auto');
+        const splitterBarComponent: DebugElement = fixture.debugElement.query(By.css(SPLITTERBAR_CLASS));
+        splitterBarComponent.nativeElement.focus();
+        UIInteractions.triggerEventHandlerKeyDown('ArrowUp', splitterBarComponent, false, false, true);
+        fixture.detectChanges();
+        expect(pane1.hidden).toBeTruthy();
+        UIInteractions.triggerEventHandlerKeyDown('ArrowDown', splitterBarComponent, false, false, true);
+        fixture.detectChanges();
+        expect(pane1.hidden).toBeFalsy();
+        UIInteractions.triggerEventHandlerKeyDown('ArrowDown', splitterBarComponent, false, false, true);
+        fixture.detectChanges();
+        expect(pane2.hidden).toBeTruthy();
+        UIInteractions.triggerEventHandlerKeyDown('ArrowUp', splitterBarComponent, false, false, true);
+        fixture.detectChanges();
+        expect(pane2.hidden).toBeFalsy();
+    });
+
+    fit('should allow expand/collapse with Ctrl + left/right arrow keys', () => {
+        fixture.componentInstance.type = SplitterType.Horizontal;
+        fixture.detectChanges();
+        const pane1 =  splitter.panes.toArray()[0];
+        const pane2 = splitter.panes.toArray()[1];
+        expect(pane1.size).toBe('auto');
+        expect(pane2.size).toBe('auto');
+        const splitterBarComponent: DebugElement = fixture.debugElement.query(By.css(SPLITTERBAR_CLASS));
+        splitterBarComponent.nativeElement.focus();
+        UIInteractions.triggerEventHandlerKeyDown('ArrowLeft', splitterBarComponent, false, false, true);
+        fixture.detectChanges();
+        expect(pane1.hidden).toBeTruthy();
+        UIInteractions.triggerEventHandlerKeyDown('ArrowRight', splitterBarComponent, false, false, true);
+        fixture.detectChanges();
+        expect(pane1.hidden).toBeFalsy();
+        UIInteractions.triggerEventHandlerKeyDown('ArrowRight', splitterBarComponent, false, false, true);
+        fixture.detectChanges();
+        expect(pane2.hidden).toBeTruthy();
+        UIInteractions.triggerEventHandlerKeyDown('ArrowLeft', splitterBarComponent, false, false, true);
+        fixture.detectChanges();
+        expect(pane2.hidden).toBeFalsy();
+    });
+
 });
 
 @Component({