question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Issue using Ember Data with ember-power-select v4.1.7 for custom searches

See original GitHub issue

I’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:closed
  • Created 2 years ago
  • Comments:13 (7 by maintainers)

github_iconTop GitHub Comments

1reaction
waihoncommented, Dec 21, 2021

@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!

1reaction
cibernoxcommented, Dec 14, 2021

@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?

Read more comments on GitHub >

github_iconTop Results From Across the Web

Bountysource
Issue using Ember Data with ember-power-select v4.1.7 for custom searches.
Read more >
ember-power-select/CHANGELOG.md at master - GitHub
[BUGFIX] Fix bug in iOS that prevented taps in items to be selected. Bug was introduced in 1.7. 1.8.4. [ENHANCEMENT] Allow to use...
Read more >
Ember-power-select - npm.io
It is designed to work well with the way we build Ember apps, so it plays nicely with promises, ember-concurrency's tasks, ember-data collections...
Read more >
javascript - ember-power-select Custom Search Action and ...
Overview. I'm using ember-power-select in a Ember. · Situation. The select is configured to fetch data from an API endpoint and provide the...
Read more >
#ember-power-select, How to set a preselected value in ...
Used ember-power-select custom-search-action, where the request will be sent ... But when i use ember-power-select the data is not getting ...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found