fix(buttons): properly handle focus on radio buttons

Part of #890 Closes #913
ng-bootstrap · Oct 20, 2016 · 23d412b · 23d412b
1 parent deadb67
commit 23d412b
Show file tree

Hide file tree

Showing 2 changed files with 49 additions and 2 deletions.
diff --git a/src/buttons/radio.spec.ts b/src/buttons/radio.spec.ts
@@ -1,4 +1,5 @@
 import {TestBed, ComponentFixture, async} from '@angular/core/testing';
+import {By} from '@angular/platform-browser';
 import {createGenericTestComponent} from '../test/common';
 
 import {Component} from '@angular/core';
@@ -460,6 +461,37 @@ describe('ngbRadioGroup', () => {
 
   });
 
+  it('should add / remove "focus" class on labels', () => {
+    const fixture = createTestComponent(`
+      <div [(ngModel)]="model" ngbRadioGroup>
+        <label class="btn">
+          <input type="radio" name="radio" [value]="values[0]"/> {{ values[0] }}
+        </label>
+        <label class="btn">
+          <input type="radio" name="radio" [value]="values[1]"/> {{ values[1] }}
+        </label>
+      </div>
+    `);
+    fixture.detectChanges();
+
+    const inputDebugEls = fixture.debugElement.queryAll(By.css('Input'));
+
+    inputDebugEls[0].triggerEventHandler('focus', {});
+    expect(inputDebugEls[0].nativeElement.parentNode).toHaveCssClass('focus');
+    expect(inputDebugEls[1].nativeElement.parentNode).not.toHaveCssClass('focus');
+
+    inputDebugEls[0].triggerEventHandler('blur', {});
+    inputDebugEls[1].triggerEventHandler('focus', {});
+    expect(inputDebugEls[0].nativeElement.parentNode).not.toHaveCssClass('focus');
+    expect(inputDebugEls[1].nativeElement.parentNode).toHaveCssClass('focus');
+  });
+
+  it('should do nothing when a standalone radio button is focused', () => {
+    const fixture = createTestComponent(`<input type="radio" name="state" value="0"/> Foo <br>`);
+    fixture.detectChanges();
+
+    expect(() => { fixture.debugElement.query(By.css('Input')).triggerEventHandler('focus', {}); }).not.toThrow();
+  });
 });
 
 @Component({selector: 'test-cmp', template: ''})

diff --git a/src/buttons/radio.ts b/src/buttons/radio.ts
@@ -61,14 +61,23 @@ export class NgbActiveLabel {
   set disabled(isDisabled: boolean) {
     this._renderer.setElementClass(this._elRef.nativeElement, 'disabled', isDisabled);
   }
+  set focused(isFocused: boolean) { this._renderer.setElementClass(this._elRef.nativeElement, 'focus', isFocused); }
 }
 
 
 /**
  * Marks an input of type "radio" as part of the NgbRadioGroup.
  */
-@Directive(
-    {selector: 'input[type=radio]', host: {'(change)': 'onChange()', '[checked]': 'checked', '[disabled]': 'disabled'}})
+@Directive({
+  selector: 'input[type=radio]',
+  host: {
+    '[checked]': 'checked',
+    '[disabled]': 'disabled',
+    '(change)': 'onChange()',
+    '(focus)': 'focused = true',
+    '(blur)': 'focused = false'
+  }
+})
 export class NgbRadio implements OnDestroy {
   private _checked: boolean;
   private _disabled: boolean;
@@ -98,6 +107,12 @@ export class NgbRadio implements OnDestroy {
     this._disabled = this._element.nativeElement.hasAttribute('disabled') ? true : value;
   }
 
+  set focused(isFocused: boolean) {
+    if (this._label) {
+      this._label.focused = isFocused;
+    }
+  }
+
   get value() { return this._value; }
 
   get checked() { return this._checked; }