mirror of
https://github.com/angular/angular.git
synced 2026-09-14 13:54:52 +08:00
fix(radio): forward focus to native input (#6274)
* fix(radio): forward focus to native input * add comment
This commit is contained in:
@@ -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 {}
|
||||
|
||||
@@ -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,
|
||||
})
|
||||
|
||||
Reference in New Issue
Block a user