diff --git a/src/material/datepicker/datepicker-toggle.html b/src/material/datepicker/datepicker-toggle.html
index 8ded944a0061..4a1565feb314 100644
--- a/src/material/datepicker/datepicker-toggle.html
+++ b/src/material/datepicker/datepicker-toggle.html
@@ -6,8 +6,7 @@
   [attr.aria-label]="ariaLabel || _intl.openCalendarLabel"
   [attr.tabindex]="disabled ? -1 : tabIndex"
   [disabled]="disabled"
-  [disableRipple]="disableRipple"
-  (click)="_open($event)">
+  [disableRipple]="disableRipple">
 
   <svg
     *ngIf="!_customIcon"
diff --git a/src/material/datepicker/datepicker-toggle.ts b/src/material/datepicker/datepicker-toggle.ts
index c455751d920c..3d0d50a95b80 100644
--- a/src/material/datepicker/datepicker-toggle.ts
+++ b/src/material/datepicker/datepicker-toggle.ts
@@ -47,6 +47,10 @@ export class MatDatepickerToggleIcon {}
     '[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,