Using Ember Power Select to set query param of object property

Question

I am trying to use Power Select to create a drop down menu that, when an option is selected creates a query param of property of that option.

I have most of the drop down box working but when I set the 'conID' query param, no matter what I try it creates the Param as ?conID=%5Bobject%20Object%5D.

Here is the current drop down menu:

          {{#power-select
  placeholder="Select a Consultant"
  searchPlaceholder="Select a Consultant"
  selected="id"
  searchField="name"
  options=selectData
  onchange=(action (mut conID))
  as |selectData|
}}
  {{selectData.name}}
{{/power-select}}

The options load correctly. I have tried a few variations of the 'selected' value including

selected=selected
selected=selectData.id
selected="id"

With no success. The objects within selectData have the following structure:

selectData [ {name: 'string', value: number}]

Note that I can create this functionality with native select boxes as follows:

  <select class="form-control" onchange={{action (mut coc) value="target.value"}}>
            <option value="">- Select an Optionn -</option>
          {{#each option as |option|}}
          <option value="{{option.id}}">{{option.name}}</option>
          {{/each}}
          </select>

Answer 1

You should handle update event of power-select yourself to get id from the JSON object of selected power-select element. Your template.hbs should be like:

{{#power-select
  placeholder="Select a Consultant"
  searchPlaceholder="Select a Consultant"
  selected=selected
  searchField="name"
  options=selectData
  onchange=(action 'handleUpdate')
  as |selectData|
}}
  {{selectData.name}}
{{/power-select}}

and corresponding component.js should be like:

actions:{
    handleUpdate(val){
        this.set('selectedElement', val);
        if(val && val.id){
            this.set('conID', val.id);
        }
        else{
            this.set('conID', undefined);
        }
    }
}