Selected options is undefined after model save

[usamahamed]

I have item model that has relationship tags and i use multiple power select component for rendering these tags in the item page like the following:

    <PowerSelectMultiple
        @options={{@names}}
        @selected={{@selected}}
        @triggerComponent={{component "utils/ps-trigger" areAllSelected=this.areAllSelected}}
        @optionsComponent={{component "utils/ps-option"}}
        @onChange={{fn (mut @selected)}}
        @searchEnabled={{0}}
    as |entry|
    >
        {{entry.safeLabel}}
    </PowerSelectMultiple>

inside the trigger component:

<div class="m-ps__plus h-icon-plus m-icon-add__medium h-link-no-hover {{if @areAllSelected "disabled" }}" title={{if @areAllSelected (t "catalogs.tags.no-more-categories") (t "catalogs.tags.select-categories")}}>{{svg-jar "#highlightplus"}}</div>
{{this.isSelected}}
<ul id="ember-power-select-multiple-options-{{@select.uniqueId}}" class="ember-power-select-multiple-options"
    {{on "touchstart" this.chooseOption}}
    {{on "mousedown" this.chooseOption}}
>
    {{#each @select.selected as |opt idx|}}
        <li class="m-ps__item ember-power-select-multiple-option {{if opt.disabled "ember-power-select-multiple-option--disabled"}}">
            {{#unless @select.disabled }}
                <span
                      aria-label={{t "categories.remove"}}
                      class="ember-power-select-multiple-remove-btn"
                      data-selected-index={{idx}}>
                    {{t "categories.x"}}
                </span>
            {{/unless}}
            {{#if @selectedItemComponent}}
                {{component @selectedItemComponent extra=(readonly this.extra) option=(readonly opt) select=(readonly @select)}}
            {{else}}
                {{yield opt @select}}
            {{/if}}
        </li>
    {{else}}
        {{#if (and @placeholder (not @searchEnabled))}}
            <span class="ember-power-select-placeholder">{{@placeholder}}</span>
        {{/if}}
    {{/each}}
</ul>

The problem is with the new ember-data version, saving relationship inside the model with ember-changeset returns PromiseManyArray which i suspect, it causes the power select options to be undefined inside the ps-trigger component

I am not sure if this is related to this ember-data ticket https://github.com/emberjs/data/issues/8024 because it breaks only from ember-data version 3.28

Environment Info:

Ember env:
ember-source: 4.5.0
ember-cli: 4.4.0
ember-data: 4.4.0
ember-power-select: 5.0.4
ember-changeset: 4.1.0
System:
OS: macOS 11.6.7
CPU: (16) x64 Intel(R) Core(TM) i9-9880H CPU @ 2.30GHz
Binaries:
Node: 16.15.0 - ~/.volta/tools/image/node/16.15.0/bin/node
Yarn: 1.22.19 - ~/.volta/tools/image/yarn/1.22.19/bin/yarn
npm: 7.24.2 - ~/roomle-pdc-upgrade/node_modules/.bin/npm
Browsers:
Chrome: 103.0.5060.134
Firefox: 102.0.1
Safari: 15.5

[usamahamed]

Looks like this also related adopted-ember-addons/ember-changeset#281 (comment)