Skip to content

Commit b5b3c8a

Browse files
authored
Revert "fix(radio): clicks not landing correctly in some cases on Chrome (#18357)" (#18820)
This reverts commit fe29835.
1 parent bcb36c2 commit b5b3c8a

File tree

3 files changed

+6
-25
lines changed

3 files changed

+6
-25
lines changed

src/material/radio/BUILD.bazel

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -55,7 +55,6 @@ ng_test_library(
5555
),
5656
deps = [
5757
":radio",
58-
"//src/cdk/a11y",
5958
"//src/cdk/testing/private",
6059
"@npm//@angular/forms",
6160
"@npm//@angular/platform-browser",

src/material/radio/radio.spec.ts

Lines changed: 1 addition & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,8 @@
1-
import {async, ComponentFixture, fakeAsync, TestBed, tick, inject} from '@angular/core/testing';
1+
import {async, ComponentFixture, fakeAsync, TestBed, tick} from '@angular/core/testing';
22
import {FormControl, FormsModule, NgModel, ReactiveFormsModule} from '@angular/forms';
33
import {Component, DebugElement, ViewChild} from '@angular/core';
44
import {By} from '@angular/platform-browser';
55
import {dispatchFakeEvent} from '@angular/cdk/testing/private';
6-
import {FocusMonitor} from '@angular/cdk/a11y';
76

87
import {MAT_RADIO_DEFAULT_OPTIONS} from './radio';
98
import {MatRadioButton, MatRadioChange, MatRadioGroup, MatRadioModule} from './index';
@@ -396,21 +395,6 @@ describe('MatRadio', () => {
396395
.every(element => element.classList.contains('mat-focus-indicator'))).toBe(true);
397396
});
398397

399-
it('should not manually move focus to underlying input when focus comes from mouse or touch',
400-
inject([FocusMonitor], (focusMonitor: FocusMonitor) => {
401-
const radioElement = radioNativeElements[0];
402-
const inputElement = radioInputElements[0];
403-
expect(document.activeElement).not.toBe(inputElement);
404-
405-
focusMonitor.focusVia(radioElement, 'mouse');
406-
fixture.detectChanges();
407-
expect(document.activeElement).not.toBe(inputElement);
408-
409-
focusMonitor.focusVia(radioElement, 'touch');
410-
fixture.detectChanges();
411-
expect(document.activeElement).not.toBe(inputElement);
412-
}));
413-
414398
});
415399

416400
describe('group with ngModel', () => {

src/material/radio/radio.ts

Lines changed: 5 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -351,6 +351,10 @@ const _MatRadioButtonMixinBase:
351351
'[attr.aria-label]': 'null',
352352
'[attr.aria-labelledby]': 'null',
353353
'[attr.aria-describedby]': 'null',
354+
// Note: under normal conditions focus shouldn't land on this element, however it may be
355+
// programmatically set, for example inside of a focus trap, in this case we want to forward
356+
// the focus to the native element.
357+
'(focus)': '_inputElement.nativeElement.focus()',
354358
},
355359
changeDetection: ChangeDetectionStrategy.OnPush,
356360
})
@@ -536,13 +540,7 @@ export class MatRadioButton extends _MatRadioButtonMixinBase
536540
this._focusMonitor
537541
.monitor(this._elementRef, true)
538542
.subscribe(focusOrigin => {
539-
// Only forward focus manually when it was received programmatically or through the
540-
// keyboard. We should not do this for mouse/touch focus for two reasons:
541-
// 1. It can prevent clicks from landing in Chrome (see #18269).
542-
// 2. They're already handled by the wrapping `label` element.
543-
if (focusOrigin === 'keyboard' || focusOrigin === 'program') {
544-
this._inputElement.nativeElement.focus();
545-
} else if (!focusOrigin && this.radioGroup) {
543+
if (!focusOrigin && this.radioGroup) {
546544
this.radioGroup._touch();
547545
}
548546
});

0 commit comments

Comments
 (0)