feat(material/datepicker): Allow user to jump between start and end dates with arrow keys

Author: kseamon

src/material/datepicker/date-range-input-parts.ts

@@ -10,6 +10,7 @@ import {
   Directive,
   ElementRef,
   Optional,
+  inject,
   InjectionToken,
   Inject,
   OnInit,
@@ -36,9 +37,12 @@ import {
   MatDateFormats,
   ErrorStateMatcher,
 } from '@angular/material/core';
-import {BACKSPACE} from '@angular/cdk/keycodes';
+import {Directionality} from '@angular/cdk/bidi';
+import {BACKSPACE, LEFT_ARROW, RIGHT_ARROW} from '@angular/cdk/keycodes';
 import {MatDatepickerInputBase, DateFilterFn} from './datepicker-input-base';
 import {DateRange, DateSelectionModelChange} from './date-selection-model';
+import {Subject} from 'rxjs';
+import {filter, take} from 'rxjs/operators';
 
 /** Parent component that should be wrapped around `MatStartDate` and `MatEndDate`. */
 export interface MatDateRangeInputParent<D> {
@@ -86,17 +90,20 @@ abstract class MatDateRangeInputPartBase<D>
   protected abstract override _assignValueToModel(value: D | null): void;
   protected abstract override _getValueFromModel(modelValue: DateRange<D>): D | null;
 
+  protected readonly _dir = inject(Directionality, InjectFlags.Optional);
+  private readonly _onKeyupSubject = new Subject<KeyboardEvent>();
+
   constructor(
     @Inject(MAT_DATE_RANGE_INPUT_PARENT) public _rangeInput: MatDateRangeInputParent<D>,
-    elementRef: ElementRef<HTMLInputElement>,
+    public override _elementRef: ElementRef<HTMLInputElement>,
     public _defaultErrorStateMatcher: ErrorStateMatcher,
     private _injector: Injector,
     @Optional() public _parentForm: NgForm,
     @Optional() public _parentFormGroup: FormGroupDirective,
     @Optional() dateAdapter: DateAdapter<D>,
     @Optional() @Inject(MAT_DATE_FORMATS) dateFormats: MatDateFormats,
   ) {
-    super(elementRef, dateAdapter, dateFormats);
+    super(_elementRef, dateAdapter, dateFormats);
   }
 
   ngOnInit() {
@@ -181,6 +188,26 @@ abstract class MatDateRangeInputPartBase<D>
     ) as MatDateRangeInputPartBase<D> | undefined;
     opposite?._validatorOnChange();
   }
+
+  protected _onKeyup(event: KeyboardEvent) {
+    this._onKeyupSubject.next(event);
+  }
+
+  protected _moveFocusOnKeyup(
+    target: MatDateRangeInputPartBase<D>,
+    downEvent: KeyboardEvent,
+    cursorPosition: number,
+  ) {
+    this._onKeyupSubject
+      .pipe(
+        filter(upEvent => upEvent.keyCode === downEvent.keyCode),
+        take(1),
+      )
+      .subscribe(() => {
+        target._elementRef.nativeElement.setSelectionRange(cursorPosition, cursorPosition);
+        target.focus();
+      });
+  }
 }
 
 const _MatDateRangeInputBase = mixinErrorState(MatDateRangeInputPartBase);
@@ -194,6 +221,7 @@ const _MatDateRangeInputBase = mixinErrorState(MatDateRangeInputPartBase);
     '(input)': '_onInput($event.target.value)',
     '(change)': '_onChange()',
     '(keydown)': '_onKeydown($event)',
+    '(keyup)': '_onKeyup($event)',
     '[attr.id]': '_rangeInput.id',
     '[attr.aria-haspopup]': '_rangeInput.rangePicker ? "dialog" : null',
     '[attr.aria-owns]': '(_rangeInput.rangePicker?.opened && _rangeInput.rangePicker.id) || null',
@@ -284,6 +312,24 @@ export class MatStartDate<D> extends _MatDateRangeInputBase<D> implements CanUpd
     const value = element.value;
     return value.length > 0 ? value : element.placeholder;
   }
+
+  override _onKeydown(event: KeyboardEvent) {
+    const endInput = this._rangeInput._endInput;
+    const element = this._elementRef.nativeElement;
+    const isLtr = this._dir?.value !== 'rtl';
+
+    // If the user hits RIGHT (LTR) when at the end of the input (and no
+    // selection), move the cursor to the start of the end input.
+    if (
+      ((event.keyCode === RIGHT_ARROW && isLtr) || (event.keyCode === LEFT_ARROW && !isLtr)) &&
+      element.selectionStart === element.value.length &&
+      element.selectionEnd === element.value.length
+    ) {
+      this._moveFocusOnKeyup(endInput, event, 0);
+    }
+
+    super._onKeydown(event);
+  }
 }
 
 /** Input for entering the end date in a `mat-date-range-input`. */
@@ -295,6 +341,7 @@ export class MatStartDate<D> extends _MatDateRangeInputBase<D> implements CanUpd
     '(input)': '_onInput($event.target.value)',
     '(change)': '_onChange()',
     '(keydown)': '_onKeydown($event)',
+    '(keyup)': '_onKeyup($event)',
     '[attr.aria-haspopup]': '_rangeInput.rangePicker ? "dialog" : null',
     '[attr.aria-owns]': '(_rangeInput.rangePicker?.opened && _rangeInput.rangePicker.id) || null',
     '[attr.min]': '_getMinDate() ? _dateAdapter.toIso8601(_getMinDate()) : null',
@@ -370,9 +417,23 @@ export class MatEndDate<D> extends _MatDateRangeInputBase<D> implements CanUpdat
   }
 
   override _onKeydown(event: KeyboardEvent) {
+    const startInput = this._rangeInput._startInput;
+    const element = this._elementRef.nativeElement;
+    const isLtr = this._dir?.value !== 'rtl';
+
     // If the user is pressing backspace on an empty end input, move focus back to the start.
-    if (event.keyCode === BACKSPACE && !this._elementRef.nativeElement.value) {
-      this._rangeInput._startInput.focus();
+    if (event.keyCode === BACKSPACE && !element.value) {
+      startInput.focus();
+    }
+
+    // If the user hits LEFT (LTR) when at the start of the input (and no
+    // selection), move the cursor to the end of the start input.
+    if (
+      ((event.keyCode === LEFT_ARROW && isLtr) || (event.keyCode === RIGHT_ARROW && !isLtr)) &&
+      element.selectionStart === 0 &&
+      element.selectionEnd === 0
+    ) {
+      this._moveFocusOnKeyup(startInput, event, startInput._elementRef.nativeElement.value.length);
     }
 
     super._onKeydown(event);