How do I update an Ember.Select when I add a new option? - ajax

Question

I'm trying to update the options in a select the first time a user clicks on it (eventually this will be an ajax call). The problem is, you can't see the option that is added on click until the second time that you click the select.
First Click: http://i.stack.imgur.com/Dx0d5.png
Second Click: http://i.stack.imgur.com/0Xirb.png
Here is the view:
App.ArchiveView = Ember.Select.extend({
selection: null
initialized: null
classNames: ['select2 flat']
optionValuePath: "content.url"
optionLabelPath: "content.date"
contentBinding: 'controller.child_reports'
didInsertElement: ->
#_super()
unless #get('initialized')
#get('controller.child_reports').pushObject(
{date: 'Latest', url: #get('controller.last_child_report_url')}
)
click: ->
unless #get('initialized')
#get('controller.child_reports').pushObject(
{date: '5-15', url: 'sucka'}
)
#set('initialized', true)
#need to rerender or something
change: ->
#set('controller.amazon_url', #get('selection.url'))
})
And the controller:
App.ReportController = Ember.ObjectController.extend({
child_reports: null
init: ->
#_super()
#set('child_reports', [])
amazon_url: ((key, value) ->
unless value?
value = #get('model.amazon_url')
else
#set('model.amazon_url', value)
return value
).property('model.amazon_url')
last_child_report_url: ( ->
#get('model._embedded.last_child_report.amazon_url')
).property('model._embedded.last_child_report.amazon_url')
I've tried #.rerender() in the click() action to no avail. How do I get the added option to display on the first click?
Thanks!

Answer 1

In short: use mouseDown instead of click. Something like:
App.SuperSelect = Ember.Select.extend({
openedOnce: false,
mouseDown: function () {
this._super();
if (this.get("state") !== "inDOM") {
return;
}
if (this.get("openedOnce")) {
return;
}
this.set("openedOnce", true);
this.get("controller.model").pushObject(/*Create new model*/);
}
});
Complete working JSBIN here.