From b5b3c8a632c1228bc7870e65b52c1ca8b90a9fd3 Mon Sep 17 00:00:00 2001 From: Andrew Seguin Date: Fri, 13 Mar 2020 11:01:04 -0700 Subject: [PATCH] Revert "fix(radio): clicks not landing correctly in some cases on Chrome (#18357)" (#18820) This reverts commit fe298350cd8391ce9a24b56c275c297bdf2b8a12. --- src/material/radio/BUILD.bazel | 1 - src/material/radio/radio.spec.ts | 18 +----------------- src/material/radio/radio.ts | 12 +++++------- 3 files changed, 6 insertions(+), 25 deletions(-) diff --git a/src/material/radio/BUILD.bazel b/src/material/radio/BUILD.bazel index b5019188e5e7..b6f7bdac23eb 100644 --- a/src/material/radio/BUILD.bazel +++ b/src/material/radio/BUILD.bazel @@ -55,7 +55,6 @@ ng_test_library( ), deps = [ ":radio", - "//src/cdk/a11y", "//src/cdk/testing/private", "@npm//@angular/forms", "@npm//@angular/platform-browser", diff --git a/src/material/radio/radio.spec.ts b/src/material/radio/radio.spec.ts index 1df3b2283b22..ae1698625119 100644 --- a/src/material/radio/radio.spec.ts +++ b/src/material/radio/radio.spec.ts @@ -1,9 +1,8 @@ -import {async, ComponentFixture, fakeAsync, TestBed, tick, inject} from '@angular/core/testing'; +import {async, ComponentFixture, fakeAsync, TestBed, tick} 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'; @@ -396,21 +395,6 @@ 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', () => { diff --git a/src/material/radio/radio.ts b/src/material/radio/radio.ts index afe4d61caa89..e64c9da6e7ac 100644 --- a/src/material/radio/radio.ts +++ b/src/material/radio/radio.ts @@ -351,6 +351,10 @@ 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, }) @@ -536,13 +540,7 @@ export class MatRadioButton extends _MatRadioButtonMixinBase this._focusMonitor .monitor(this._elementRef, true) .subscribe(focusOrigin => { - // 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) { + if (!focusOrigin && this.radioGroup) { this.radioGroup._touch(); } });