Search code examples
javascriptember.jsember-dataember-cliember-power-select

Custom and first options in ember-power-select


I'm using Ember-power-select-with-create to make custom selections possible in my dropdowns.

This is the power-select part in the .hbs file.

{{#power-select-multiple-with-create
        options=options //array for prefill values
        selected=offer.offer //is where we save it to (offer is the model and has an array named offer)
        onchange=(action (mut offer.offer)) //default onchange for prefill options
        onfocus=(action "handleFocus")
        onblur=(action "handleBlur")
        oncreate=(action "createOffer" offer.offer) //This calls "createOffer"
        buildSuggestion=suggestion
      as |offer|}}
        {{offer}}
      {{/power-select-multiple-with-create}}

The "createOffer" function in my .js file looks like this:
It gets two values passed: selected which is offer.offer and searchText which is the input that the user is trying to add.

createOffer(selected, searchText)
{
  if (selected == null)
  {
    selected = []; //This is what I'm currently trying: if its null initialize it
  }

  if (selected.includes(searchText)) { //Don't add if it's already added
    this.get('notify').alert("Already added!", { closeAfter: 4000 });
  }
  else { // if it's not yet added push it to the array
    selected.pushObject(searchText);
  }
}

This code works perfectly fine for adding those that we predefined as well for custom options, however it does not work if it is the first and a custom offer that we try to add to a new group of offers.

I'm assuming it has something to do with the fact that the array is not yet initialized. A pointer to the fact that it is due to the array not being initialized is that I get an error message along the lines of: Can't call pushObject on undefined. And I'm assuming the reason that it works with predetermined values is that ember-power-select probably initializes it somewhere but I couldn't find any documentation about it.

Thanks for your answers!


Solution

  • If anyone ever stumbles upon this, this was the solution
    Calling that when we create the offer and then initializing the offer array like that:

    offer.set('offer', []);