@angular/material 11.1.2 → 11.2.2

package/fesm2015/datepicker.js

@@ -1952,6 +1952,7 @@ class MatDatepickerBase {
         this.xPosition = 'start';
         /** Preferred position of the datepicker in the Y axis. */
         this.yPosition = 'below';
+        this._restoreFocus = true;
         /**
          * Emits selected year in multiyear view.
          * This doesn't imply a change on the selected date.
@@ -2021,6 +2022,15 @@ class MatDatepickerBase {
             this.stateChanges.next(undefined);
         }
     }
+    /**
+     * Whether to restore focus to the previously-focused element when the calendar is closed.
+     * Note that automatic focus restoration is an accessibility feature and it is recommended that
+     * you provide your own equivalent, if you decide to turn it off.
+     */
+    get restoreFocus() { return this._restoreFocus; }
+    set restoreFocus(value) {
+        this._restoreFocus = coerceBooleanProperty(value);
+    }
     /**
      * Classes to be passed to the date picker panel.
      * Supports string and string array values, similar to `ngClass`.
@@ -2149,7 +2159,7 @@ class MatDatepickerBase {
                 this._focusedElementBeforeOpen = null;
             }
         };
-        if (this._focusedElementBeforeOpen &&
+        if (this._restoreFocus && this._focusedElementBeforeOpen &&
             typeof this._focusedElementBeforeOpen.focus === 'function') {
             // Because IE moves focus asynchronously, we can't count on it being restored before we've
             // marked the datepicker as closed. If the event fires out of sequence and the element that
@@ -2319,6 +2329,7 @@ MatDatepickerBase.propDecorators = {
     disabled: [{ type: Input }],
     xPosition: [{ type: Input }],
     yPosition: [{ type: Input }],
+    restoreFocus: [{ type: Input }],
     yearSelected: [{ type: Output }],
     monthSelected: [{ type: Output }],
     viewChanged: [{ type: Output }],
@@ -2854,7 +2865,7 @@ class MatDatepickerToggle {
 MatDatepickerToggle.decorators = [
     { type: Component, args: [{
                 selector: 'mat-datepicker-toggle',
-                template: "<button\n  #button\n  mat-icon-button\n  type=\"button\"\n  [attr.aria-haspopup]=\"datepicker ? 'dialog' : null\"\n  [attr.aria-label]=\"ariaLabel || _intl.openCalendarLabel\"\n  [attr.tabindex]=\"disabled ? -1 : tabIndex\"\n  [disabled]=\"disabled\"\n  [disableRipple]=\"disableRipple\"\n  (click)=\"_open($event)\">\n\n  <svg\n    *ngIf=\"!_customIcon\"\n    class=\"mat-datepicker-toggle-default-icon\"\n    viewBox=\"0 0 24 24\"\n    width=\"24px\"\n    height=\"24px\"\n    fill=\"currentColor\"\n    focusable=\"false\">\n    <path d=\"M19 3h-1V1h-2v2H8V1H6v2H5c-1.11 0-1.99.9-1.99 2L3 19c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 16H5V8h14v11zM7 10h5v5H7z\"/>\n  </svg>\n\n  <ng-content select=\"[matDatepickerToggleIcon]\"></ng-content>\n</button>\n",
+                template: "<button\n  #button\n  mat-icon-button\n  type=\"button\"\n  [attr.aria-haspopup]=\"datepicker ? 'dialog' : null\"\n  [attr.aria-label]=\"ariaLabel || _intl.openCalendarLabel\"\n  [attr.tabindex]=\"disabled ? -1 : tabIndex\"\n  [disabled]=\"disabled\"\n  [disableRipple]=\"disableRipple\">\n\n  <svg\n    *ngIf=\"!_customIcon\"\n    class=\"mat-datepicker-toggle-default-icon\"\n    viewBox=\"0 0 24 24\"\n    width=\"24px\"\n    height=\"24px\"\n    fill=\"currentColor\"\n    focusable=\"false\">\n    <path d=\"M19 3h-1V1h-2v2H8V1H6v2H5c-1.11 0-1.99.9-1.99 2L3 19c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 16H5V8h14v11zM7 10h5v5H7z\"/>\n  </svg>\n\n  <ng-content select=\"[matDatepickerToggleIcon]\"></ng-content>\n</button>\n",
                 host: {
                     'class': 'mat-datepicker-toggle',
                     '[attr.tabindex]': 'null',
@@ -2863,6 +2874,10 @@ MatDatepickerToggle.decorators = [
                     '[class.mat-warn]': 'datepicker && datepicker.color === "warn"',
                     // Used by the test harness to tie this toggle to its datepicker.
                     '[attr.data-mat-calendar]': 'datepicker ? datepicker.id : null',
+                    // Bind the `click` on the host, rather than the inner `button`, so that we can call
+                    // `stopPropagation` on it without affecting the user's `click` handlers. We need to stop
+                    // it so that the input doesn't get focused automatically by the form field (See #21836).
+                    '(click)': '_open($event)',
                 },
                 exportAs: 'matDatepickerToggle',
                 encapsulation: ViewEncapsulation.None,