fix(datepicker): move focus into start input when pressing backspace on end input (#19239)

Makes it so that pressing backspace on an empty end input moves focus into the start input. This makes the two separate inputs feel a bit more like a single input.

Author: crisbeto

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

@@ -38,6 +38,7 @@ import {
   ErrorStateMatcher,
 } from '@angular/material/core';
 import {BooleanInput} from '@angular/cdk/coercion';
+import {BACKSPACE} from '@angular/cdk/keycodes';
 import {MatDatepickerInputBase, DateFilterFn} from './datepicker-input-base';
 import {DateRange, MatDateSelectionModel} from './date-selection-model';
 
@@ -47,6 +48,8 @@ export interface MatDateRangeInputParent<D> {
   min: D | null;
   max: D | null;
   dateFilter: DateFilterFn<D>;
+  _startInput: MatDateRangeInputPartBase<D>;
+  _endInput: MatDateRangeInputPartBase<D>;
   _groupDisabled: boolean;
   _ariaDescribedBy: string | null;
   _ariaLabelledBy: string | null;
@@ -319,5 +322,14 @@ export class MatEndDate<D> extends _MatDateRangeInputBase<D> implements CanUpdat
     }
   }
 
+  _onKeydown(event: KeyboardEvent) {
+    // If the user is pressing backspace on an empty end input, focus focus back to the start.
+    if (event.keyCode === BACKSPACE && !this._elementRef.nativeElement.value) {
+      this._rangeInput._startInput.focus();
+    }
+
+    super._onKeydown(event);
+  }
+
   static ngAcceptInputType_disabled: BooleanInput;
 }

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

@@ -7,8 +7,9 @@ import {MatNativeDateModule} from '@angular/material/core';
 import {MatDatepickerModule} from './datepicker-module';
 import {MatFormFieldModule} from '@angular/material/form-field';
 import {MatInputModule} from '@angular/material/input';
-import {dispatchFakeEvent} from '@angular/cdk/testing/private';
+import {dispatchFakeEvent, dispatchKeyboardEvent} from '@angular/cdk/testing/private';
 import {FocusMonitor} from '@angular/cdk/a11y';
+import {BACKSPACE} from '@angular/cdk/keycodes';
 import {MatDateRangeInput} from './date-range-input';
 import {MatDateRangePicker} from './date-range-picker';
 
@@ -473,6 +474,34 @@ describe('MatDateRangeInput', () => {
     expect(fixture.componentInstance.end).toBe(end);
   }));
 
+  it('should move focus to the start input when pressing backspace on an empty end input', () => {
+    const fixture = createComponent(StandardRangePicker);
+    fixture.detectChanges();
+    const {start, end} = fixture.componentInstance;
+
+    spyOn(start.nativeElement, 'focus').and.callThrough();
+
+    end.nativeElement.value = '';
+    dispatchKeyboardEvent(end.nativeElement, 'keydown', BACKSPACE);
+    fixture.detectChanges();
+
+    expect(start.nativeElement.focus).toHaveBeenCalled();
+  });
+
+  it('should move not move focus when pressing backspace if the end input has a value', () => {
+    const fixture = createComponent(StandardRangePicker);
+    fixture.detectChanges();
+    const {start, end} = fixture.componentInstance;
+
+    spyOn(start.nativeElement, 'focus').and.callThrough();
+
+    end.nativeElement.value = '10/10/2020';
+    dispatchKeyboardEvent(end.nativeElement, 'keydown', BACKSPACE);
+    fixture.detectChanges();
+
+    expect(start.nativeElement.focus).not.toHaveBeenCalled();
+  });
+
 });
 
 @Component({

tools/public_api_guard/material/datepicker.d.ts

@@ -367,6 +367,7 @@ export declare class MatEndDate<D> extends _MatDateRangeInputBase<D> implements
     constructor(rangeInput: MatDateRangeInputParent<D>, elementRef: ElementRef<HTMLInputElement>, defaultErrorStateMatcher: ErrorStateMatcher, injector: Injector, parentForm: NgForm, parentFormGroup: FormGroupDirective, dateAdapter: DateAdapter<D>, dateFormats: MatDateFormats);
     protected _assignValueToModel(value: D | null): void;
     protected _getValueFromModel(modelValue: DateRange<D>): D | null;
+    _onKeydown(event: KeyboardEvent): void;
     static ngAcceptInputType_disabled: BooleanInput;
     static ɵdir: i0.ɵɵDirectiveDefWithMeta<MatEndDate<any>, "input[matEndDate]", never, {}, {}, never>;
     static ɵfac: i0.ɵɵFactoryDef<MatEndDate<any>, [null, null, null, null, { optional: true; }, { optional: true; }, { optional: true; }, { optional: true; }]>;