Document how to use POJO's with power-select

The documentation is kind of vague about this. It says:

The component compares the selected option with the options in the collection by equality, so when working with POJOs bear in mind that { foo: 'bar' } === { foo: 'bar' } is false.

It’s quite a common use case where your options is something like: [{display: 'Hello', value: 1}, {display: 'Sup', value: 2}], and your selected is the value of the value key (i.e 1 or 2).

Is there a way to say 'compare selected with key x? Does power-select not support this at all?

[cibernox]

I doesn’t support it, but it’s intentional. The selected has to be, by design, one option of the list, or have it’s same shape.

But it’s not supported because it’s trivial to do by the user, by with a computed property or, my favourite option, using the find-by helper from ember-composable-helpers.

{{#power-select 
  options=options 
  selected=(find-by "value" optionValue options) 
  onchange=(action (mut optionValue) value="value") as |option|}}

  {{option.display}}

{{/power-select}}

I find the example above very explicit. In your context you only care about one value, that perhaps happens to be a query parameter or something. But to the component you pass the record with that ID or value.

[williamhaley]

I’d love if the snippet above was in the docs. Over the years I’ve tried again and again to see if I could use power-select without needing a separate action on the controller/computed property/some extra state management for selected, and I always gave up on it.

It wasn’t until today I saw this comment and can finally understood the syntax for passing in the currently selected option to the mut handler. The value=<path> syntax still feels a bit like magic to me and I’ve never really understood that syntax as described in the ember docs for Modifying the action's first parameter. I always thought the value="" worked by pulling data from the underlying JS event and I’m not totally clear why it works here as described, but it does!

On closer inspection, I either continually missed this from the Ember docs or never understood it fully until now

If a value option for the {{action}} helper is specified, its value will be considered a property path that will be read off of the first parameter of the action.

Either way, I’m finally able to get rid of the convoluted wrapper component I had made around power-select thanks to seeing a working example of value="value" here today. Though, for my underlying list of objects, my solution was value="name" since that’s how my relevant array data ids were assigned