fix(cdk-experimental/menu): fix double state toggle in radio and chec…

…kbox menu items (#20259)

Fixes an issue where clicking a CdkMenuItemRadio or CdkMenuItemCheckbox causes the click handler to
fire twice resulting in toggling state twice and an unchecked checkbox.

src/cdk-experimental/menu/menu-item-checkbox.spec.ts

@@ -53,7 +53,7 @@ describe('MenuItemCheckbox', () => {
   it('should toggle the aria checked attribute', () => {
     expect(checkboxElement.getAttribute('aria-checked')).toBeNull();
 
-    checkbox.trigger();
+    checkboxElement.click();
     fixture.detectChanges();
 
     expect(checkboxElement.getAttribute('aria-checked')).toBe('true');

src/cdk-experimental/menu/menu-item-checkbox.ts

@@ -6,7 +6,7 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import {Directive, HostListener} from '@angular/core';
+import {Directive} from '@angular/core';
 import {CdkMenuItemSelectable} from './menu-item-selectable';
 import {CdkMenuItem} from './menu-item';
 
@@ -29,11 +29,7 @@ import {CdkMenuItem} from './menu-item';
   ],
 })
 export class CdkMenuItemCheckbox extends CdkMenuItemSelectable {
-  // In Ivy the `host` metadata will be merged, whereas in ViewEngine it is overridden. In order
-  // to avoid double event listeners, we need to use `HostListener`. Once Ivy is the default, we
-  // can move this back into `host`.
-  // tslint:disable:no-host-decorator-in-concrete
-  @HostListener('click')
+  /** Toggle the checked state of the checkbox. */
   trigger() {
     super.trigger();
 

src/cdk-experimental/menu/menu-item-radio.spec.ts

@@ -51,7 +51,7 @@ describe('MenuItemRadio', () => {
   it('should toggle the aria checked attribute', () => {
     expect(radioElement.getAttribute('aria-checked')).toBeNull();
 
-    radioButton.trigger();
+    radioElement.click();
     fixture.detectChanges();
 
     expect(radioElement.getAttribute('aria-checked')).toBe('true');

src/cdk-experimental/menu/menu-item-radio.ts

@@ -6,16 +6,7 @@
  * found in the LICENSE file at https://angular.io/license
  */
 import {UniqueSelectionDispatcher} from '@angular/cdk/collections';
-import {
-  Directive,
-  OnDestroy,
-  ElementRef,
-  Self,
-  Optional,
-  Inject,
-  NgZone,
-  HostListener,
-} from '@angular/core';
+import {Directive, OnDestroy, ElementRef, Self, Optional, Inject, NgZone} from '@angular/core';
 import {Directionality} from '@angular/cdk/bidi';
 import {CdkMenuItemSelectable} from './menu-item-selectable';
 import {CdkMenuItem} from './menu-item';
@@ -68,11 +59,6 @@ export class CdkMenuItemRadio extends CdkMenuItemSelectable implements OnDestroy
     );
   }
 
-  // In Ivy the `host` metadata will be merged, whereas in ViewEngine it is overridden. In order
-  // to avoid double event listeners, we need to use `HostListener`. Once Ivy is the default, we
-  // can move this back into `host`.
-  // tslint:disable:no-host-decorator-in-concrete
-  @HostListener('click')
   /** Toggles the checked state of the radio-button. */
   trigger() {
     super.trigger();