Possible bugs with EPS v4.0.0-beta.2

Hello. I’m following an Ember tutorial and rewriting the app in Octane (Ember v3.13.1) as I go. I met two problems when it was time to introduce EPS and I wanted to try out the latest 4.0.0-beta.2.

If you have questions or need clarifications, feel free to let me know. You can find my latest code here: https://github.com/ijlee2/Tutorials/tree/master/ember-embercasts-library-ui. Thanks!

1. Compile error: assign is not a helper

Once I added a <PowerSelect> in a template, I encountered the error above. On Ember Discord, madnificent kindly pointed out that one needed to install ember-assign-helper.

This addon is currently listed under devDependencies in package.json. Does it need to be under dependencies instead?

2. Unable to click on an option if I provide an array of Ember Data records

When @options is an array of Ember Data records, the selectAuthor below doesn’t get called when I click on an option. However, if I use the arrow keys and Enter to select, the action is called.

I think the problem only occurs with an array of ED records. If this.model is an array of strings or an array of POJOs, I am able to call the action with mouse or Enter key.

Similarly, when I pass to @search an action that returns an array of ED records, I am unable to click on an option.

// Route template

...
<PowerSelect
    @options={{this.model}}
    @selected={{this.selectedAuthor}}
    @onChange={{this.selectAuthor}}
    as |author|
>
    {{author.lastName}}, {{author.firstName}}
</PowerSelect>
...

// Route handler

import Route from '@ember/routing/route';

export default class BooksCreateRoute extends Route {
    model() {
        return this.store.findAll('author');
    }
}

// Controller

import Controller from '@ember/controller';
import { action } from '@ember/object';
import { tracked } from '@glimmer/tracking';

export default class BooksCreateController extends Controller {
    @tracked selectedAuthor;

    @action
    selectAuthor(author) {
        this.selectedAuthor = author;
    }
}

Temporary workaround

In case there are others who want to work with EPS and ED, I’ll post my temporary solution here:

// Route template

...
<PowerSelect
    @selected={{this.selectedAuthor}}
    @searchEnabled={{true}}
    @search={{this.searchAuthor}}
    @onChange={{this.selectAuthor}}
    as |author|
>
    {{author.lastName}}, {{author.firstName}}
</PowerSelect>
...

// Route handler

import Route from '@ember/routing/route';

export default class BooksCreateRoute extends Route {
    model() {
        return {
            title: '',
            isbn: '',
            publicationDate: null,
            author: null
        };
    }
}

// Controller

import Controller from '@ember/controller';
import { action } from '@ember/object';
import { tracked } from '@glimmer/tracking';

export default class BooksCreateController extends Controller {
    @tracked selectedAuthor;

    @action
    async searchAuthor(query) {
        const authors = await this.store.query('author', {
            filter: { query }
        });

        // Ember Power Select v4.0.0-beta.2 does not handle an array of
        // Ember Data models as options. To get around this issue, we can
        // return an array of POJOs and keep a record of searched authors.
        this.possibleAuthors = authors;

        return authors.map(author => ({
            id: author.id,
            firstName: author.firstName,
            lastName: author.lastName
        }));
    }

    @action
    selectAuthor(author) {
        this.model.author = this.possibleAuthors.find(possibleAuthor => {
            return possibleAuthor.id === author.id;
        });

        this.selectedAuthor = author;
    }

    @action
    saveBook(event) {
        event.preventDefault();

        const book = this.store.createRecord('book', this.model);

        book
            .save()
            .then(() => {
                this.transitionToRoute('books');
            });
    }
}

[MikiDi]

I can confirm both. For nr. 2 I believe it’s here where things go wrong. Looks like direct use of objectAt was dropped a whole while ago (#bf87418148c2dc75aa9a0c74c4c164284c66bb11, PR #534 ) ( @madnificent You’re mentioned up here ^ 👍 )

[lucacorti]

@cibernox The selected choice label is still not updating correctly for me in b6 when clearing the selection.