cibernox / ember-power-select

The extensible select component built for ember.
http://www.ember-power-select.com
Other
540 stars 377 forks source link

Selected options is undefined after model save #1527

Open usamahamed opened 2 years ago

usamahamed commented 2 years ago

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

image

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 commented 2 years ago

Looks like this also related https://github.com/poteto/ember-changeset/issues/281#issuecomment-451066171