fix(radio): forward focus to native input (#6274)

* fix(radio): forward focus to native input

* add comment
This commit is contained in:
mmalerba
2017-08-08 23:21:53 -07:00
committed by GitHub
parent 9df292fba8
commit cea4d9fa32
2 changed files with 31 additions and 0 deletions
+27
View File
@@ -15,6 +15,7 @@ describe('MdRadio', () => {
TestBed.configureTestingModule({
imports: [MdRadioModule, FormsModule, ReactiveFormsModule],
declarations: [
FocusableRadioButton,
RadiosInsideRadioGroup,
RadioGroupWithNgModel,
RadioGroupWithFormControl,
@@ -640,6 +641,27 @@ describe('MdRadio', () => {
}
});
});
describe('with tabindex', () => {
let fixture: ComponentFixture<FocusableRadioButton>;
beforeEach(() => {
fixture = TestBed.createComponent(FocusableRadioButton);
fixture.detectChanges();
});
it('should forward focus to native input', () => {
let radioButtonEl = fixture.debugElement.query(By.css('.mat-radio-button')).nativeElement;
let inputEl = fixture.debugElement.query(By.css('.mat-radio-input')).nativeElement;
radioButtonEl.focus();
// Focus events don't always fire in tests, so we needc to fake it.
dispatchFakeEvent(radioButtonEl, 'focus');
fixture.detectChanges();
expect(document.activeElement).toBe(inputEl);
});
});
});
@@ -728,3 +750,8 @@ class RadioGroupWithNgModel {
class RadioGroupWithFormControl {
formControl = new FormControl();
}
@Component({
template: `<md-radio-button tabindex="-1"></md-radio-button>`
})
class FocusableRadioButton {}
+4
View File
@@ -332,6 +332,10 @@ export const _MdRadioButtonMixinBase = mixinColor(mixinDisableRipple(MdRadioButt
'[class.mat-radio-checked]': 'checked',
'[class.mat-radio-disabled]': 'disabled',
'[attr.id]': 'id',
// 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,
})