fix(radio): clicks not landing correctly in some cases on Chrome (#18357)

This is along the same lines as #18285 since the radio button and slide toggle have a very similar setup. Whenever the radio button host receives focus we forward it immediately to the underlying input, but this bouncing around of focus could cause clicks to be interrupted in some cases. These changes make it so that we only move focus if the host was focused by the keyboard or mouse.

Author: crisbeto

src/material/radio/BUILD.bazel

@@ -55,6 +55,7 @@ ng_test_library(
     ),
     deps = [
         ":radio",
+        "//src/cdk/a11y",
         "//src/cdk/testing/private",
         "@npm//@angular/forms",
         "@npm//@angular/platform-browser",

src/material/radio/radio.spec.ts

@@ -1,8 +1,9 @@
-import {async, ComponentFixture, fakeAsync, TestBed, tick} from '@angular/core/testing';
+import {async, ComponentFixture, fakeAsync, TestBed, tick, inject} from '@angular/core/testing';
 import {FormControl, FormsModule, NgModel, ReactiveFormsModule} from '@angular/forms';
 import {Component, DebugElement, ViewChild} from '@angular/core';
 import {By} from '@angular/platform-browser';
 import {dispatchFakeEvent} from '@angular/cdk/testing/private';
+import {FocusMonitor} from '@angular/cdk/a11y';
 
 import {MAT_RADIO_DEFAULT_OPTIONS} from './radio';
 import {MatRadioButton, MatRadioChange, MatRadioGroup, MatRadioModule} from './index';
@@ -395,6 +396,21 @@ describe('MatRadio', () => {
           .every(element => element.classList.contains('mat-focus-indicator'))).toBe(true);
     });
 
+    it('should not manually move focus to underlying input when focus comes from mouse or touch',
+      inject([FocusMonitor], (focusMonitor: FocusMonitor) => {
+        const radioElement = radioNativeElements[0];
+        const inputElement = radioInputElements[0];
+        expect(document.activeElement).not.toBe(inputElement);
+
+        focusMonitor.focusVia(radioElement, 'mouse');
+        fixture.detectChanges();
+        expect(document.activeElement).not.toBe(inputElement);
+
+        focusMonitor.focusVia(radioElement, 'touch');
+        fixture.detectChanges();
+        expect(document.activeElement).not.toBe(inputElement);
+      }));
+
   });
 
   describe('group with ngModel', () => {

src/material/radio/radio.ts

@@ -351,10 +351,6 @@ const _MatRadioButtonMixinBase:
     '[attr.aria-label]': 'null',
     '[attr.aria-labelledby]': 'null',
     '[attr.aria-describedby]': 'null',
-    // Note: under normal conditions focus shouldn't land on this element, however it may be
-    // programmatically set, for example inside of a focus trap, in this case we want to forward
-    // the focus to the native element.
-    '(focus)': '_inputElement.nativeElement.focus()',
   },
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
@@ -540,7 +536,13 @@ export class MatRadioButton extends _MatRadioButtonMixinBase
     this._focusMonitor
       .monitor(this._elementRef, true)
       .subscribe(focusOrigin => {
-        if (!focusOrigin && this.radioGroup) {
+        // Only forward focus manually when it was received programmatically or through the
+        // keyboard. We should not do this for mouse/touch focus for two reasons:
+        // 1. It can prevent clicks from landing in Chrome (see #18269).
+        // 2. They're already handled by the wrapping `label` element.
+        if (focusOrigin === 'keyboard' || focusOrigin === 'program') {
+          this._inputElement.nativeElement.focus();
+        } else if (!focusOrigin && this.radioGroup) {
           this.radioGroup._touch();
         }
       });