GumbyFramework/Gumby

gumby.checkbox.js - labels not wrapping checkbox don't properly check input

Closed this issue · 0 comments

Regularly, if you have an input inside a label, like so the gumby js checkbox code works properly.

<form class="field">
  <div class="checkbox">
    <label>
      <input type="checkbox" id="mybox" />
      <span></span>
      Some text
    </label>
  </div>
</form>

However, if you must structure your HTML like so, the checkbox doesn't actually get checked...

<form class="field">
  <div class="checkbox">
    <input type="checkbox" id="mybox" />
  </div>
  <!-- label not containing checkbox -->
  <label for="mybox">
    Some text
  </label>
</form>

I did some deep debugging, and seems that the checkbox DOES get set within the Checkbox.update function, but after if you inspect that same input it's NOT checked.

I solved this in my own code by modifying gumby.checkbox.js to call a window.setTimeout to change the prop - but obviously something weird is going on here. Please fix!