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

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; }]>;