Revert "fix(material/datepicker): update active date on focusing a ca…

…lendar cell (#24279)" (#24380)

This reverts commit 052b97d.

(cherry picked from commit e04e4a7)

src/material/datepicker/calendar-body.html

@@ -63,8 +63,7 @@
  [attr.aria-disabled]="!item.enabled || null"
  [attr.aria-pressed]="_isSelected(item.compareValue)"
  [attr.aria-current]="todayValue === item.compareValue ? 'date' : null"
- (click)="_cellClicked(item, $event)"
- (focus)="_emitActiveDateChange(item, $event)">
+ (click)="_cellClicked(item, $event)">
  <div class="mat-calendar-body-cell-content mat-focus-indicator"
  [class.mat-calendar-body-selected]="_isSelected(item.compareValue)"
  [class.mat-calendar-body-comparison-identical]="_isComparisonIdentical(item.compareValue)"

src/material/datepicker/calendar-body.ts

@@ -18,7 +18,6 @@ import {
  OnChanges,
  SimpleChanges,
  OnDestroy,
- AfterViewChecked,
 } from '@angular/core';
 import {take} from 'rxjs/operators';
 
@@ -68,18 +67,13 @@ export interface MatCalendarUserEvent<D> {
  encapsulation: ViewEncapsulation.None,
  changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class MatCalendarBody implements OnChanges, OnDestroy, AfterViewChecked {
+export class MatCalendarBody implements OnChanges, OnDestroy {
  /**
  * Used to skip the next focus event when rendering the preview range.
  * We need a flag like this, because some browsers fire focus events asynchronously.
  */
  private _skipNextFocus: boolean;
 
- /**
- * Used to focus the active cell after change detection has run.
- */
- private _focusActiveCellAfterViewChecked = false;
-
  /** The label for the table. (e.g. "Jan 2017"). */
  @Input() label: string;
 
@@ -104,13 +98,6 @@ export class MatCalendarBody implements OnChanges, OnDestroy, AfterViewChecked {
  /** The cell number of the active cell in the table. */
  @Input() activeCell: number = 0;
 
- ngAfterViewChecked() {
- if (this._focusActiveCellAfterViewChecked) {
- this._focusActiveCell();
- this._focusActiveCellAfterViewChecked = false;
- }
- }
-
  /** Whether a range is being selected. */
  @Input() isRange: boolean = false;
 
@@ -140,8 +127,6 @@ export class MatCalendarBody implements OnChanges, OnDestroy, AfterViewChecked {
  MatCalendarUserEvent<MatCalendarCell | null>
  >();
 
- @Output() readonly activeDateChange = new EventEmitter<MatCalendarUserEvent<number>>();
-
  /** The number of blank cells to put at the beginning for the first row. */
  _firstRowOffset: number;
 
@@ -168,12 +153,6 @@ export class MatCalendarBody implements OnChanges, OnDestroy, AfterViewChecked {
  }
  }
 
- _emitActiveDateChange(cell: MatCalendarCell, event: FocusEvent): void {
- if (cell.enabled) {
- this.activeDateChange.emit({value: cell.value, event});
- }
- }
-
  /** Returns whether a cell should be marked as selected. */
  _isSelected(value: number) {
  return this.startValue === value || this.endValue === value;
@@ -235,11 +214,6 @@ export class MatCalendarBody implements OnChanges, OnDestroy, AfterViewChecked {
  });
  }
 
- /** Focuses the active cell after change detection has run and the microtask queue is empty. */
- _scheduleFocusActiveCellAfterViewChecked() {
- this._focusActiveCellAfterViewChecked = true;
- }
-
  /** Gets whether a value is the start of the main range. */
  _isRangeStart(value: number) {
  return isStart(value, this.startValue, this.endValue);

src/material/datepicker/month-view.html

@@ -21,7 +21,6 @@
  [labelMinRequiredCells]="3"
  [activeCell]="_dateAdapter.getDate(activeDate) - 1"
  (selectedValueChange)="_dateSelected($event)"
- (activeDateChange)="_updateActiveDate($event)"
  (previewChange)="_previewChanged($event)"
  (keyup)="_handleCalendarBodyKeyup($event)"
  (keydown)="_handleCalendarBodyKeydown($event)">

src/material/datepicker/month-view.spec.ts

@@ -520,30 +520,6 @@ describe('MatMonthView', () => {
  );
  },
  );
-
- it('should go to month that is focused', () => {
- const jan11Cell = fixture.debugElement.nativeElement.querySelector(
- '[data-mat-row="1"][data-mat-col="3"] button',
- ) as HTMLElement;
-
- dispatchFakeEvent(jan11Cell, 'focus');
- fixture.detectChanges();
-
- expect(calendarInstance.date).toEqual(new Date(2017, JAN, 11));
- });
-
- it('should not call `.focus()` when the active date is focused', () => {
- const jan5Cell = fixture.debugElement.nativeElement.querySelector(
- '[data-mat-row="0"][data-mat-col="4"] button',
- ) as HTMLElement;
- const focusSpy = (jan5Cell.focus = jasmine.createSpy('cellFocused'));
-
- dispatchFakeEvent(jan5Cell, 'focus');
- fixture.detectChanges();
-
- expect(calendarInstance.date).toEqual(new Date(2017, JAN, 5));
- expect(focusSpy).not.toHaveBeenCalled();
- });
  });
  });
  });

src/material/datepicker/month-view.ts

@@ -230,7 +230,9 @@ export class MatMonthView<D> implements AfterContentInit, OnChanges, OnDestroy {
  /** Handles when a new date is selected. */
  _dateSelected(event: MatCalendarUserEvent<number>) {
  const date = event.value;
- const selectedDate = this._getDateFromDayOfMonth(date);
+ const selectedYear = this._dateAdapter.getYear(this.activeDate);
+ const selectedMonth = this._dateAdapter.getMonth(this.activeDate);
+ const selectedDate = this._dateAdapter.createDate(selectedYear, selectedMonth, date);
  let rangeStartDate: number | null;
  let rangeEndDate: number | null;
 
@@ -250,26 +252,6 @@ export class MatMonthView<D> implements AfterContentInit, OnChanges, OnDestroy {
  this._changeDetectorRef.markForCheck();
  }
 
- /**
- * Takes the index of a calendar body cell wrapped in in an event as argument. For the date that
- * corresponds to the given cell, set `activeDate` to that date and fire `activeDateChange` with
- * that date.
- *
- * This fucntion is used to match each component's model of the active date with the calendar
- * body cell that was focused. It updates its value of `activeDate` synchronously and updates the
- * parent's value asynchonously via the `activeDateChange` event. The child component receives an
- * updated value asynchronously via the `activeCell` Input.
- */
- _updateActiveDate(event: MatCalendarUserEvent<number>) {
- const month = event.value;
- const oldActiveDate = this._activeDate;
- this.activeDate = this._getDateFromDayOfMonth(month);
-
- if (this._dateAdapter.compareDate(oldActiveDate, this.activeDate)) {
- this.activeDateChange.emit(this._activeDate);
- }
- }
-
  /** Handles keydown events on the calendar body when calendar is in month view. */
  _handleCalendarBodyKeydown(event: KeyboardEvent): void {
  // TODO(mmalerba): We currently allow keyboard navigation to disabled dates, but just prevent
@@ -345,10 +327,9 @@ export class MatMonthView<D> implements AfterContentInit, OnChanges, OnDestroy {
 
  if (this._dateAdapter.compareDate(oldActiveDate, this.activeDate)) {
  this.activeDateChange.emit(this.activeDate);
-
- this._focusActiveCellAfterViewChecked();
  }
 
+ this._focusActiveCell();
  // Prevent unexpected default actions such as form submission.
  event.preventDefault();
  }
@@ -395,11 +376,6 @@ export class MatMonthView<D> implements AfterContentInit, OnChanges, OnDestroy {
  this._matCalendarBody._focusActiveCell(movePreview);
  }
 
- /** Focuses the active cell after change detection has run and the microtask queue is empty. */
- _focusActiveCellAfterViewChecked() {
- this._matCalendarBody._scheduleFocusActiveCellAfterViewChecked();
- }
-
  /** Called when the user has activated a new cell and the preview needs to be updated. */
  _previewChanged({event, value: cell}: MatCalendarUserEvent<MatCalendarCell<D> | null>) {
  if (this._rangeStrategy) {
@@ -422,18 +398,6 @@ export class MatMonthView<D> implements AfterContentInit, OnChanges, OnDestroy {
  }
  }
 
- /**
- * Takes a day of the month and returns a new date in the same month and year as the currently
- * active date. The returned date will have the same day of the month as the argument date.
- */
- private _getDateFromDayOfMonth(dayOfMonth: number): D {
- return this._dateAdapter.createDate(
- this._dateAdapter.getYear(this.activeDate),
- this._dateAdapter.getMonth(this.activeDate),
- dayOfMonth,
- );
- }
-
  /** Initializes the weekdays. */
  private _initWeekdays() {
  const firstDayOfWeek = this._dateAdapter.getFirstDayOfWeek();

src/material/datepicker/multi-year-view.html

@@ -11,7 +11,6 @@
  [cellAspectRatio]="4 / 7"
  [activeCell]="_getActiveCell()"
  (selectedValueChange)="_yearSelected($event)"
- (activeDateChange)="_updateActiveDate($event)"
  (keyup)="_handleCalendarBodyKeyup($event)"
  (keydown)="_handleCalendarBodyKeydown($event)">
  </tbody>

src/material/datepicker/multi-year-view.spec.ts

@@ -13,7 +13,7 @@ import {dispatchFakeEvent, dispatchKeyboardEvent} from '../../cdk/testing/privat
 import {Component, ViewChild} from '@angular/core';
 import {waitForAsync, ComponentFixture, TestBed} from '@angular/core/testing';
 import {MatNativeDateModule} from '@angular/material/core';
-import {JAN, MAR} from '../testing';
+import {JAN} from '../testing';
 import {By} from '@angular/platform-browser';
 import {MatCalendarBody} from './calendar-body';
 import {MatMultiYearView, yearsPerPage, yearsPerRow} from './multi-year-view';
@@ -216,34 +216,6 @@ describe('MatMultiYearView', () => {
 
  expect(calendarInstance.date).toEqual(new Date(2017 + yearsPerPage * 2, JAN, 1));
  });
-
- it('should go to the year that is focused', () => {
- fixture.componentInstance.date = new Date(2017, MAR, 5);
- fixture.detectChanges();
- expect(calendarInstance.date).toEqual(new Date(2017, MAR, 5));
-
- const year2022Cell = fixture.debugElement.nativeElement.querySelector(
- '[data-mat-row="1"][data-mat-col="2"] button',
- ) as HTMLElement;
-
- dispatchFakeEvent(year2022Cell, 'focus');
- fixture.detectChanges();
-
- expect(calendarInstance.date).toEqual(new Date(2022, MAR, 5));
- });
-
- it('should not call `.focus()` when the active date is focused', () => {
- const year2017Cell = fixture.debugElement.nativeElement.querySelector(
- '[data-mat-row="0"][data-mat-col="1"] button',
- ) as HTMLElement;
- const focusSpy = (year2017Cell.focus = jasmine.createSpy('cellFocused'));
-
- dispatchFakeEvent(year2017Cell, 'focus');
- fixture.detectChanges();
-
- expect(calendarInstance.date).toEqual(new Date(2017, JAN, 1));
- expect(focusSpy).not.toHaveBeenCalled();
- });
  });
  });
  });

src/material/datepicker/multi-year-view.ts

@@ -204,31 +204,18 @@ export class MatMultiYearView<D> implements AfterContentInit, OnDestroy {
  /** Handles when a new year is selected. */
  _yearSelected(event: MatCalendarUserEvent<number>) {
  const year = event.value;
- const selectedYear = this._dateAdapter.createDate(year, 0, 1);
- const selectedDate = this._getDateFromYear(year);
-
- this.yearSelected.emit(selectedYear);
- this.selectedChange.emit(selectedDate);
- }
-
- /**
- * Takes the index of a calendar body cell wrapped in in an event as argument. For the date that
- * corresponds to the given cell, set `activeDate` to that date and fire `activeDateChange` with
- * that date.
- *
- * This fucntion is used to match each component's model of the active date with the calendar
- * body cell that was focused. It updates its value of `activeDate` synchronously and updates the
- * parent's value asynchonously via the `activeDateChange` event. The child component receives an
- * updated value asynchronously via the `activeCell` Input.
- */
- _updateActiveDate(event: MatCalendarUserEvent<number>) {
- const year = event.value;
- const oldActiveDate = this._activeDate;
-
- this.activeDate = this._getDateFromYear(year);
- if (this._dateAdapter.compareDate(oldActiveDate, this.activeDate)) {
- this.activeDateChange.emit(this.activeDate);
- }
+ this.yearSelected.emit(this._dateAdapter.createDate(year, 0, 1));
+ let month = this._dateAdapter.getMonth(this.activeDate);
+ let daysInMonth = this._dateAdapter.getNumDaysInMonth(
+ this._dateAdapter.createDate(year, month, 1),
+ );
+ this.selectedChange.emit(
+ this._dateAdapter.createDate(
+ year,
+ month,
+ Math.min(this._dateAdapter.getDate(this.activeDate), daysInMonth),
+ ),
+ );
  }
 
  /** Handles keydown events on the calendar body when calendar is in multi-year view. */
@@ -291,7 +278,7 @@ export class MatMultiYearView<D> implements AfterContentInit, OnDestroy {
  this.activeDateChange.emit(this.activeDate);
  }
 
- this._focusActiveCellAfterViewChecked();
+ this._focusActiveCell();
  // Prevent unexpected default actions such as form submission.
  event.preventDefault();
  }
@@ -316,28 +303,6 @@ export class MatMultiYearView<D> implements AfterContentInit, OnDestroy {
  this._matCalendarBody._focusActiveCell();
  }
 
- /** Focuses the active cell after change detection has run and the microtask queue is empty. */
- _focusActiveCellAfterViewChecked() {
- this._matCalendarBody._scheduleFocusActiveCellAfterViewChecked();
- }
-
- /**
- * Takes a year and returns a new date on the same day and month as the currently active date
- * The returned date will have the same year as the argument date.
- */
- private _getDateFromYear(year: number) {
- const activeMonth = this._dateAdapter.getMonth(this.activeDate);
- const daysInMonth = this._dateAdapter.getNumDaysInMonth(
- this._dateAdapter.createDate(year, activeMonth, 1),
- );
- const normalizedDate = this._dateAdapter.createDate(
- year,
- activeMonth,
- Math.min(this._dateAdapter.getDate(this.activeDate), daysInMonth),
- );
- return normalizedDate;
- }
-
  /** Creates an MatCalendarCell for the given year. */
  private _createCellForYear(year: number) {
  const date = this._dateAdapter.createDate(year, 0, 1);

src/material/datepicker/year-view.html

@@ -13,7 +13,6 @@
  [cellAspectRatio]="4 / 7"
  [activeCell]="_dateAdapter.getMonth(activeDate)"
  (selectedValueChange)="_monthSelected($event)"
- (activeDateChange)="_updateActiveDate($event)"
  (keyup)="_handleCalendarBodyKeyup($event)"
  (keydown)="_handleCalendarBodyKeydown($event)">
  </tbody>

src/material/datepicker/year-view.spec.ts

@@ -292,30 +292,6 @@ describe('MatYearView', () => {
 
  expect(calendarInstance.date).toEqual(new Date(2018, FEB, 28));
  });
-
- it('should go to date that is focused', () => {
- const juneCell = fixture.debugElement.nativeElement.querySelector(
- '[data-mat-row="1"][data-mat-col="1"] button',
- ) as HTMLElement;
-
- dispatchFakeEvent(juneCell, 'focus');
- fixture.detectChanges();
-
- expect(calendarInstance.date).toEqual(new Date(2017, JUN, 5));
- });
-
- it('should not call `.focus()` when the active date is focused', () => {
- const janCell = fixture.debugElement.nativeElement.querySelector(
- '[data-mat-row="0"][data-mat-col="0"] button',
- ) as HTMLElement;
- const focusSpy = (janCell.focus = jasmine.createSpy('cellFocused'));
-
- dispatchFakeEvent(janCell, 'focus');
- fixture.detectChanges();
-
- expect(calendarInstance.date).toEqual(new Date(2017, JAN, 5));
- expect(focusSpy).not.toHaveBeenCalled();
- });
  });
  });
  });