Chosen select event not triggering in Ember.js app

I have the following structure of fields in a form within an Ember app:

<div class="box">
  <label>Name</label>
  {{text-input value=model.name}}
</div>

<div class="box">
  <label>Gender</label>
  {{chosen-select value=model.gender content=selectOptions.genders}}
</div>

The text-input tag refers to a component that inherits from Ember.TextField. The chosen-select tag refers to another component that inherits from Ember.Select. One of the behaviors provided by chosen-select is that it converts the <select> element into a chosen select for better user interaction.

After doing that, I wanted to give the focus to any input field (textfield or select) whenever the user clicked anywhere in the field's surrounding box, not just on the field or its label. I was able to do it successfully with the text input fields, using the code below (pure jquery, no ember was needed here):

$(document).on 'click', '.box', ->
  $(this).find('input').focus()

By attaching the click event handler to the document, I'm able to catch clicks on .box elements that do not exist at the time this event handler is declared. The result is that whenever a .box element is clicked, the text input field inside it (if any), gets the focus.

Achieving it for selects too

I wanted to achieve the equivalent behavior for .box elements containing a chosen select, which is to have the dropdown from the select being open programmatically when the surrounding .box is clicked.

According to chosen's options documentation, if we want to programmatically instruct a chosen control to open its dropdown, we must sent it the chosen:open event, so this is what tried, adding it to the code above:

$(document).on 'click', '.box', ->
  $(this).find('input').focus()
  $(this).find('select').trigger('chosen:open')

And it does not work. It does not give any errors either. I then noticed that if I issued that last line from the browser's js console it works (substituting this with a reference to a .box element, of course). When issued from the console, the corresponding select inside that box opens its dropdown. But when issued from the click event handler above it does not work.

So I figured I needed to issue this command not directly in that context, but using some of Ember's Ember.run functions, like Ember.run.next and some others. But I've had no luck, and I've tried all sorts of things, even triggering the event after a small delay.

I was hoping that someone here with some Ember.js expertise could shed some light on this problem. I assume the problem is when ember, because if I get an equivalent html with no ember (from the front-end designer that gave me the html I'm working with) the thing works flawlessly from the click event too.