fix(material/datepicker): avoid interfering with external click listener (#21856)

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.

Author: crisbeto

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"

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,