Issue using Ember Data with ember-power-select v4.1.7 for custom searches
See original GitHub issueI’m learning to use ember-power-select
addon to perform custom searches.
Here’s the component invocation:
<PowerSelect
@selected={{this.selectedAuthor}}
@searchEnabled={{true}}
@search={{this.searchAuthor}}
@onChange={{this.selectAuthor}}
as |author|
>
{{author.last}}, {{author.first}}
</PowerSelect>
My project uses Ember Data. So my first implementation of the search function is as follows:
@action
searchAuthor(query) {
return this.store.query('author', { filter: { query } });
}
That seemed to work initially but I then noticed an issue: the “Loading options…” kept on displaying even though all the expected search results have come out. I navigated to the Network tab and noticed continuous calls to the API server.
I revised the search function by adding async
and await
:
@action
async searchAuthor(query) {
let authors = await this.store.query('author', {
filter: { query }
});
return authors.toArray();
}
The issue with “Loading options…” and continuous calls to the API server still happened.
I revised the search function to use fetch
:
@action
async searchAuthor(query) {
let host = ENV.apiHost ?? '';
let url = `${host}/authors?filter[query]=${query}`;
let response = await fetch(url);
let json = await response.json();
return json.data;
}
… and the component invocation as follows:
<PowerSelect
{{!-- no changes --}}
>
{{author.attributes.last}}, {{author.attributes.first}}
</PowerSelect>
This time it worked, i.e. the “Loading options…” disappeared after the all the expected search results have come out, and there were no continuous calls to API server.
According to https://guides.emberjs.com/release/models/finding-records/#toc_querying-for-multiple-records, query()
returns a PromiseArray in the same way as findAll
. So I thought it would work with the addon.
May I know how to make ember-poser-select
to work with Ember Data, this.store.query()
in particular?
Issue Analytics
- State:
- Created 2 years ago
- Comments:13 (7 by maintainers)
Top GitHub Comments
@cibernox, thank you for releasing a new version (5.0.3)! It no longer presents the problem.
@mayatron, thank you for suggesting a solution for the issue!
@mayatron that give me some hope, I couldn’t find why this was being invoked on a loop. I published 5.0.3 with the updated dependency. @waihon can you check if that new version still presents this problem?