If @value is a Proxy NativeSelectBox doesn't show selected with ember-changeset 3.x

[sinankeskin]

First of all thanks for this addon. I'm always using latest version.

I have a NativeSelectBox like this. I don't know if ember responsible or not but my value is proxy object because of models belongs_to relation and changeset.

This selectbox was working before but not anymore. I've researched deeply and found out that I was using changeset 2.x and I've updated to 3.x recently. Somehow changeset's pxoxy objects slightly different between 2.x and 3.x.

Long story short NativeSelectBox doesn't show selected object with ember-changeset 3.x

Thank you.

          <NativeSelectBox
            id={{el.id}}
            class="custom-select {{el.validation}}"
            @value={{el.value}}
            @onSelect={{fn this.updateLocationType}} as |sb|
          >
            <sb.Option @value="">
              Konum Tipi
            </sb.Option>
            {{#each @locationTypes as |locationType|}}
              <sb.Option @value={{locationType}}>
                {{locationType.name}}
              </sb.Option>
            {{/each}}
          </NativeSelectBox>

[amk221]

Thanks I'll take a look

[amk221]

What is: el.value in this case?

And what is {{locationType}}

[sinankeskin]

LocationType is an ember model and el.value is a Proxy of LocationType. ember-changeset does that.

[amk221]

I have set up a demo: https://github.com/amk221/-ember-select-box-ember-changeset/blob/main/app/routes/application.js#L13

Just testing a bit more before I come back with an answer

[amk221]

An object !== to a proxy of that object - so I don't see how that could ever have worked? Under the hood the select box addon has always used === to tell whether an option is selected.

Perhaps something else in your code has changed?

Note that Ember Data async relationships are Promise Proxy Objects under the hood. So when these resolve, the comparison is actually model === model, not model === proxy, so that will work.

[amk221]

If you can create a reproduction, I can better understand your situation.

[sinankeskin]

An object !== to a proxy of that object - so I don't see how that could ever have worked? Under the hood the select box addon has always used === to tell whether an option is selected.

Perhaps something else in your code has changed?

Note that Ember Data async relationships are Promise Proxy Objects under the hood. So when these resolve, the comparison is actually model === model, not model === proxy, so that will work.

You are absolutly right but this test doesn't cover my case. In this line this.bar2 is an actual model. peekRecord returns model.

But in my case this.bar2 is a Promise Proxy object.

      <SelectBox @value={{this.bar2}} as |sb|>

I will investigate deeply in your demo app. Thank you.

[sinankeskin]

Here is my demo app but interestingly this works flawless. But same logic in my production app doesn't work.

Really odd. I don't know what am I missing. Thank you.

Demo App

[amk221]

Hmmm. Sorry I can't help any further. Do you mind if I close for now?

[amk221]

Good luck, I'd be interested to know what it is - feel free to post back!

[sinankeskin]

In my case this line option.args.selectBox.value; in ember-changeset 2.x returns model but in ember-changeset 3.x returns Proxy. Same app only ember-changeset upgraded. Thats why selected item doesn't show.

https://github.com/zestia/ember-select-box/blob/7f5a8c0ce173b4851026928cb01b71373c10afc2/addon/utils/shared/selected.js#L9

In this line value is model now.

https://github.com/zestia/ember-select-box/blob/7f5a8c0ce173b4851026928cb01b71373c10afc2/addon/utils/component/value.js#L40

But in here selectBox.value still shows Proxy. I believe value changes doesn't affect selectBox object.

https://github.com/zestia/ember-select-box/blob/7f5a8c0ce173b4851026928cb01b71373c10afc2/addon/utils/shared/value.js#L28

[amk221]

I see. So all your @locationTypes were models. but, the select box's value was a proxy to a locationType.

[sinankeskin]

Yes. Correct.

[sinankeskin]

Hi @amk221

Any news on this? Thank you.

[amk221]

Ah, sorry I didn't realise you were waiting for a response. I thought from the above that it's clear to not be an issue with this addon?

[sinankeskin]

Hımm ok. I'll unwrap the proxy then.

Thank you for everything 👍🏻

[amk221]

Curious what other select-box addons would do in this situation? Have you tried ember-power-select?

[sinankeskin]

Actually I have. ember-power-select resolves succesfully. Because of selected item type any or PromiseProxy it works as expected.

https://github.com/cibernox/ember-power-select/blob/7f4071ff8caf4136afb27624a97bec5ad4ef2b08/addon/components/power-select.ts#L64

Here is the screenshot:

[amk221]

Looks like they reach into proxy.content too. Not something I want to do I'm afraid.

Additionally, the displayed option is rendered correctly, but, the option corresponding to the value is not flagged as selected. See this screenshot:

[sinankeskin]

Understood. Thank you again.