title: Why is the Span that's nested in a Label preventing other nested items' ability to click to select checkbox?
body: <p>The template is pretty simple, a checkbox component and string of text nested inside a label element:</p>
  
  <pre><code>&lt;label class="statusList-label"&gt;
    {{list-checkbox
      value=object.id
      sourceList=item.objectIds
      class=""}}
    {{object.name}}
  &lt;/label&gt;
  </code></pre>
  
  <p>The checkbox template nested inside looks like this:</p>
  
  <pre><code>&lt;span&gt;
    &lt;input type="checkbox" class="u-display-none"&gt;
    &lt;i class="fa fa-fw fa-lg {{if checked 'fa-check-square' 'fa-square-
    o'}}
    fa-checkbox {{if disabled 'disabled'}}" unselectable="on"&gt;
    &lt;/i&gt;
  &lt;/span&gt;
  </code></pre>
  
  <p>Now, the expected behaviour is that clicking on anything nested inside the <code>&lt;label&gt;</code> tag should toggle the <code>&lt;input&gt;</code> inside. However, clicking on the <code>object.name</code> that gets outputted to the DOM does not work - only clicking on items inside the <code>&lt;span&gt;</code> works. Any help is appreciated.</p>
  
  <p>EDIT: Here is the HTML output:</p>
  
  <pre><code>&lt;div class="item"&gt;
    &lt;label class="itemLabel"&gt;
      &lt;span unselectable="on" id="ember1173" class="cell cell--checkbox ember-view"&gt;
        &lt;input type="checkbox" class="u-display-none"&gt;
        &lt;i unselectable="on" class="fa fa-fw fa-lg fa-check-square fa-checkbox "&gt;&lt;/i&gt;
        &lt;!----&gt;
      &lt;/span&gt;
      Some Text Here
    &lt;/label&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>EDIT 2: Figured it out.. there was preventDefault on the parent component to handle click events for some other behaviour. Just had to remove that..</p>