fix: wrap radio, checkbox in span to allow custom styles

adfinis · Jan 24, 2018 · f8bbf2e · f8bbf2e
1 parent 4d7b6a9
commit f8bbf2e
Show file tree

Hide file tree

Showing 2 changed files with 4 additions and 2 deletions.
diff --git a/addon/templates/components/validated-input.hbs b/addon/templates/components/validated-input.hbs
@@ -67,7 +67,8 @@
             focusOut = (action "setDirty")
             disabled = disabled
           }}
-          {{option.label}}</label>
+          <span>{{option.label}}</span>
+        </label>
       </div>
     {{/each}}
 
@@ -81,7 +82,7 @@
           update     = (action "update")
           focusOut   = (action "setDirty")
         }}
-        {{label}}
+        <span>{{label}}</span>
       </label>
     </div>
 

diff --git a/tests/integration/components/validated-form-test.js b/tests/integration/components/validated-form-test.js
@@ -53,6 +53,7 @@ test('it renders a radio group', function(assert) {
   assert.equal(this.$('label').eq(1).text().trim(), 'Option 1');
   assert.equal(this.$('label').eq(2).text().trim(), 'Option 2');
   assert.equal(this.$('label').eq(3).text().trim(), 'Option 3');
+  assert.equal(this.$('label > span').length, 3, 'Wraps all label text in span');
 });
 
 test('it renders a radio group with block form', function(assert) {