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

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: https://i.stack.imgur.com/Dx0d5.png

Second Click: https://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.