@angular/material 11.1.2 → 11.2.2

package/bundles/material-datepicker.umd.js

@@ -2354,6 +2354,7 @@
             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.
@@ -2439,6 +2440,19 @@
             enumerable: false,
             configurable: true
         });
+        Object.defineProperty(MatDatepickerBase.prototype, "restoreFocus", {
+            /**
+             * 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: function () { return this._restoreFocus; },
+            set: function (value) {
+                this._restoreFocus = coercion.coerceBooleanProperty(value);
+            },
+            enumerable: false,
+            configurable: true
+        });
         Object.defineProperty(MatDatepickerBase.prototype, "panelClass", {
             /**
              * Classes to be passed to the date picker panel.
@@ -2577,7 +2591,7 @@
                     _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
@@ -2751,6 +2765,7 @@
         disabled: [{ type: i0.Input }],
         xPosition: [{ type: i0.Input }],
         yPosition: [{ type: i0.Input }],
+        restoreFocus: [{ type: i0.Input }],
         yearSelected: [{ type: i0.Output }],
         monthSelected: [{ type: i0.Output }],
         viewChanged: [{ type: i0.Output }],
@@ -3322,7 +3337,7 @@
     MatDatepickerToggle.decorators = [
         { type: i0.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',
@@ -3331,6 +3346,10 @@
                         '[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: i0.ViewEncapsulation.None,