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>
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);
}
}
}