From 2d0bb9d3bf158ca641f642ad86d8ca97c9521df2 Mon Sep 17 00:00:00 2001
From: Kristiyan Kostadinov <crisbeto@abv.bg>
Date: Tue, 9 Feb 2021 21:20:10 +0100
Subject: [PATCH] fix(material/datepicker): avoid interfering with external
 click listener

Currently the datepicker toggle's `click` listener is on the inner `button` element and we
call `stopPropagation` on it in order to prevent the form field from focusing the input.
The problem is that doing so will also prevent any custom `click` handler that the user
might have added to the `mat-datepicker-toggle`.

These changes resolve the issue by moving the listener directly onto the toggle host
which will invoke any external listeners while still allowing us to stop its propagation.

Fixes #21836.
---
 src/material/datepicker/datepicker-toggle.html | 3 +--
 src/material/datepicker/datepicker-toggle.ts   | 4 ++++
 2 files changed, 5 insertions(+), 2 deletions(-)

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,