Ember-power-select: Document how to use POJO's with power-select

[orf]

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.

[orf]

Thank you! Would it be possible to add that code snippet to the documentation somewhere? The ember-composable-helpers sounds like a perfect way to do it.

[cibernox]

Yeah, you're not the first one asking this question.
Could you do a PR to the docs? The docs are in the dummy app of this repo, and it's just plain handlebars.

[orf]

Sure thing :+1:

[orf]

Hmm, in your code snippet would this actually help? Surely find-by returns the POJO in options, which is fine, but {value: 1} !== {value: 1} right? So surely it still wouldn't be selected?

[cibernox]

{value: 1} !== {value: 1} because they are diffent object, that just happen to have the same keys and values.

However,

let obj = { value: 1 };
obj === obj; // because they are the exact same object

Find by is going to return the exact same object. Think in the way WeakMap and Map work.

[orf]

Ahh I see, I understand. Thank you!

[omairvaiyani]

The PR needs some adjustments @orf https://github.com/cibernox/ember-power-select/pull/763

[Caltor]

This never seems to have made it into the docs.... Neither the computed property or find-by example.

[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