Skip to content

Commit

Permalink
fix(radio): forward focus to native input (#6274)
Browse files Browse the repository at this point in the history
* fix(radio): forward focus to native input

* add comment
  • Loading branch information
mmalerba committed Aug 9, 2017
1 parent 9df292f commit cea4d9f
Show file tree
Hide file tree
Showing 2 changed files with 31 additions and 0 deletions.
27 changes: 27 additions & 0 deletions src/lib/radio/radio.spec.ts
Expand Up @@ -15,6 +15,7 @@ describe('MdRadio', () => {
TestBed.configureTestingModule({
imports: [MdRadioModule, FormsModule, ReactiveFormsModule],
declarations: [
FocusableRadioButton,
RadiosInsideRadioGroup,
RadioGroupWithNgModel,
RadioGroupWithFormControl,
Expand Down Expand Up @@ -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);
});
});
});


Expand Down Expand Up @@ -728,3 +750,8 @@ class RadioGroupWithNgModel {
class RadioGroupWithFormControl {
formControl = new FormControl();
}

@Component({
template: `<md-radio-button tabindex="-1"></md-radio-button>`
})
class FocusableRadioButton {}
4 changes: 4 additions & 0 deletions src/lib/radio/radio.ts
Expand Up @@ -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,
})
Expand Down

0 comments on commit cea4d9f

Please sign in to comment.