CODEWITHSUNDEEP
javascripthtmlember.js
mziwisky
mziwisky

Reputation: 345

Some HTML form elements do not work inside of an Ember modal

Using Ember, I want to make a modal that has some form elements in it, including radio buttons and a file selector. I followed this guide from the Ember docs to create a simple modal, but when I add radios and a file selector to it, they don't work right. In Chrome, you can select an initial radio button, but then you can't change your selection. In Firefox, you can't even select an initial one. In both browsers, the file selector button does nothing at all.

Check out my JSBin, which is based off of the one at the guide linked in my first paragraph. All I did was add the radio buttons and file selector, both to the modal (where they're broken) and to the index template (where they work fine).

So, why don't radio buttons or file selectors work in the modal? How do I fix it?

Upvotes: 1

Views: 94

Answers (2)

mziwisky
mziwisky

Reputation: 345

Figured it out. The {{action}} helper implicitly calls preventDefault(), so the clicks on children of the <div {{action}}> weren't exhibiting their default behavior. To fix it, must do <div {{action preventDefault=false}}> on the parent element. See: http://emberjs.com/api/classes/Ember.Handlebars.helpers.html#toc_event-propagation

Note that this seems to be broken (or wasn't yet implemented) in Ember 1.0.0 (which my original JSBin used) and 1.2.0, but it works well in 1.3.0. Just for funsies, here's a more minimal JSBin showing it off with 1.3.0: http://jsbin.com/ucanam/3038/edit

Upvotes: 2

Kingpin2k
Kingpin2k

Reputation: 47367

That cookbook is problematic, the overlay actually blocks clicks from hitting the modal.

  <script type="text/x-handlebars" id="components/modal-dialog">
    <div class="overlay">
      <div class="modal">
        {{yield}}
      </div>
    </div>
  </script>

http://emberjs.jsbin.com/IvASIHed/5/edit

Upvotes: 1

Related Questions