diff --git a/lib/core/src/lib/datatable/directives/resizable/resize-handle.directive.spec.ts b/lib/core/src/lib/datatable/directives/resizable/resize-handle.directive.spec.ts index 16122149f0..b830693722 100644 --- a/lib/core/src/lib/datatable/directives/resizable/resize-handle.directive.spec.ts +++ b/lib/core/src/lib/datatable/directives/resizable/resize-handle.directive.spec.ts @@ -161,5 +161,17 @@ describe('ResizeHandleDirective', () => { expect(resizableContainer.resizeByKeyboard).not.toHaveBeenCalled(); expect(event.preventDefault).not.toHaveBeenCalled(); }); + + it('should not prevent default on Shift+Tab to allow reverse focus navigation', () => { + const event = new KeyboardEvent('keydown', { key: 'Tab', shiftKey: true }); + spyOn(event, 'preventDefault'); + spyOn(event, 'stopPropagation'); + + directive.onKeydown(event); + + expect(resizableContainer.resizeByKeyboard).not.toHaveBeenCalled(); + expect(event.preventDefault).not.toHaveBeenCalled(); + expect(event.stopPropagation).not.toHaveBeenCalled(); + }); }); }); diff --git a/lib/core/src/lib/datatable/directives/resizable/resize-handle.directive.ts b/lib/core/src/lib/datatable/directives/resizable/resize-handle.directive.ts index a827a05851..32bb92a2bc 100644 --- a/lib/core/src/lib/datatable/directives/resizable/resize-handle.directive.ts +++ b/lib/core/src/lib/datatable/directives/resizable/resize-handle.directive.ts @@ -34,31 +34,28 @@ export class ResizeHandleDirective implements OnInit, OnDestroy { @HostListener('keydown', ['$event']) onKeydown(event: KeyboardEvent): void { - let delta: number | null = null; const shiftDelta = 40; - if (event.shiftKey) { - delta += shiftDelta; - } const rightStepBaseValue = 20; + const shiftModifier = event.shiftKey ? shiftDelta : 0; + + let delta: number | null = null; + switch (event.key) { case 'ArrowRight': case 'ArrowUp': - delta += rightStepBaseValue; + delta = shiftModifier + rightStepBaseValue; break; case 'ArrowLeft': case 'ArrowDown': - delta = -delta; + delta = -shiftModifier; break; default: - break; + return; } - if (delta !== null) { - event.preventDefault(); - event.stopPropagation(); - - this.resizableContainer.resizeByKeyboard(delta); - } + event.preventDefault(); + event.stopPropagation(); + this.resizableContainer.resizeByKeyboard(delta); } ngOnInit(): void {