I'm trying to customize power-select with navigable-select & used this addon for select/create. I see that onchange action bubbled up in ember-power-select-with-create is not passing publicAPI to call action 'close'. Here is my code

{{#power-select-with-create options=currentOptions renderInPlace=true selected=selected onclose=(action "verifyPresence") onchange=(action "onchange") oncreate=(action "createOverrideReason") showCreateWhen=(action "hideCreateOptionOnSameName") optionsComponent='animated-options' search=(action "search") as |levelOrOption|}}
    {{#if levelOrOption.parentLevel}}
        <strong>&lt; Back</strong>
    {{else if levelOrOption.levelName}}
        {{#if levelOrOption.casea}}
           <strong>{{levelOrOption.levelName}} &gt;</strong>       
        {{/if}}
    {{else}}
        {{levelOrOption.label}}
    {{/if}}
{{/power-select-with-create}}

      onchange(levelOrOption, dropdown) {
          if (get(levelOrOption, 'levelName')) {
              this.set('currentOptions', get(levelOrOption, 'options'));              
          } else if (levelOrOption.parentLevel) {
              this.set('currentOptions', levelOrOption.parentLevel.options);
          } else {
              this.get('onchange')(levelOrOption);
              //dropdown.actions.close(); dropdown is always undefined        
          }
      },

Is it possible to use this with the 'search' api? I poked around on the code and it seems like it was designed to support that, but when I attempt to do so it never resolves the search (always 'loading options...')

Here is the markup:

  {{#power-select-with-create
      search=(action "searchVenue")
      selected=venue
      placeholder='Venue'
      onchange=(action "saveRecord")
      oncreate=(action "createRecord")
      as |venue term|
}}
  {{venue.name}}
{{/power-select-with-create}}

and the controller code:

import Ember from 'ember';

export default Ember.Component.extend({
  store: Ember.inject.service(),
  actions: {
    createRecord(term) {
      console.log(term);
    },
    saveRecord(venue) {
      this.model.set('venue', venue);
      this.model.save();
    },
    searchVenue(term) {
      return new Ember.RSVP.Promise((resolve, reject) => {
        Ember.run.debounce(this, this._performSearch, term, resolve, reject, 600);
      });
    }
  },
  _performSearch(term, resolve, reject) {
    if (Ember.isBlank(term)) { return resolve([]); }
    this.get('store').query('venue', {'name__icontains': term})
      .then(data => resolve(data), reject);
  },
});

It is making a network request, which either returns a set (for matches) or an empty JSON API count (for no matches). Thanks

Keydown works as expected when other keys are pressed, expect escape key.

Here is the twiddle https://ember-twiddle.com/1b2b9fbc3c1c7046d1059df76292b80d?openFiles=controllers.application.js%2C

Is there any way to make the suggested option appear at the bottom of the list, instead of the top?

In ember-power-select, debouncing with ember runloop and ember-concurrency works as shown in the Cookbook examples. But with this addon, only runloop debounce works. Debouncing with ember-concurrency doesn't work.

It would be really helpful if the oncreate action could directly signal ember-power-select to use the newly created model as the selected value. I could see this being accomplished by either

1. Resolving a promise returned by the action and updating the selection with the result
2. Passing in the ember-power-select publicAPI object similarly to how the core library does with all actions. I believe would allow callers to update the selection explicitly.

I see that some of the examples will explicitly update a given field selectedCountry in the oncreate hook, but the hook itself does not always have all of the required context readily available. For instance if you're building up a list of models it's a hassle to try and get at the context in order to update the correct field.

I am using Ember 2.4.3, Ember Data 2.5.2, ember-power-select-with-create 0.1.8, and ember-power-select 0.10.0-beta.6.

I cannot get the async search to work correctly with ember-power-select-with-create. To clarify, async search seems to work just fine when using vanilla ember-power-select. I have reviewed issues #12 and #6, and PR #18.

Following is a MWE:

I have a search action that looks like this:

searchTags(term) {
  return this.store.query('tags', { name: term });
},

a create action like this:

newTag(term) {
  let tag = this.store.createRecord('tag', { name: term });
  tag.save();
},

and the template:

{{#power-select-with-create
  search=(action "searchTags")
  selected=tag
  onchange=(action (mut tag))
  oncreate=(action "newTag")
  as |tag|
}}
  {{tag.name}}
{{/power-select-with-create}}

My ED query is firing off a network request, so I can confirm that that is working (and, returning an appropriate payload, which is populating in the store just fine). I checked out the source for ember-power-select-with-create and found that my calls aren't advancing past this line. Debugging the result payload at that point, it looks like the buildSuggestionLabel result is being appended to the ED results, but nothing seems to advance from there. No warnings in the console, no obvious issues. The net result is that the ember-power-select-with-create widget continues to indicate that it is still loading ("Loading options...").

Any thoughts would be greatly appreciated! Also, I am more than happy to prepare a PR, if someone can lead me down the right path.
Thanks!

I feel, it is obvious that the user has to type something when they click dropdown. Can we not show the search message if the value is false?

searchMessage=false

Let me know if I can raise a PR for this?

I've tried setting placeholder and searchPlaceholder on {{power-select-multiple-with-create}} but no luck, it just defaults to "Type to search.".

{{#power-select-multiple-with-create
  selected=selected
  searchPlaceholder="Type to add an 'option'."
  renderInPlace=true
  onchange=(action "onChangeItems")
  oncreate=(action "onCreateItem")
as |option|}}
  {{option}}
{{/power-select-multiple-with-create}}

For now, i'm using the onopen action to manually set the text within ember-power-select-option--search-message in case anyone else is having the same issue:

workAroundForSelectOptionPlaceholder() {
    run.later(this, () => {
        try {
            const placeholderEl = document
                .getElementById(get(this, "elementId"))
                .getElementsByClassName("ember-power-select-option--search-message")[0];

            if (placeholderEl) {
                placeholderEl.innerHTML = "Type to add an 'option'.";
            }
        } catch (e) {
            console.warn("workaround failed", e);
        }
    }, 25);
}		

I'm seeing an run loop issue in integration tests after oncreate. I tried to write an integration test for a component using ember-power-select-with-create. The test should cover situation if user creates a new record using power-select-with-create. Tests finishing before newly created item get selected by power-select-with-create.

A short code example:

test('allows to create new item', function(assert) {
  let { server } = this; // server provided by ember-cli-mirage
  this.set('store', {
    createRecord(type, data) {
      let record = server.create(type, data);
      let { id, name } = record;
      return { id, name, save() {} };
    },
    findAll() {
      return [{
        name: 'foo',
        types: []
      }];
    }
  });
  this.render(hbs`{{create-item store=store}}`);

  clickTrigger('.manufacturer');
  assert.equal($('.ember-power-select-option').length, 1, 'shows one manufacturer');
  assert.equal($('.ember-power-select-option').eq(0).text().trim(), 'foo', 'shows manufacturers name as option label');

  typeInSearch('bar');
  assert.equal($('.ember-power-select-option').eq(0).text().trim(), 'Add "bar"...', 'shows option to add "bar" as new manufacturer');

  nativeMouseUp('.ember-power-select-option');
  assert.deepEqual(server.db.itemManufacturers[0], { id: '1', name: 'bar', typeIds: null });

  // testing after this point is not possible anymore
  assert.equal(this.$('.manufacturer .ember-power-select-selected-item').text().trim(), 'bar', 'selects newly created item');

If I wrap code after item creation in run.later() to wait like 500ms it shows correct results. So it seems to be an run loop issue.

Also tried to use wait helper but that doesn't helped as well.

This addon is not passing through at least the following options:

• initiallyOpened
• matchTriggerWidth
• destination

Possibly more, these are just the ones I've noticed.

Edit: all the aria options are missing too. I'm referring to the api reference : http://www.ember-power-select.com/docs/api-reference

It seems like using PowerSelectMultipleWithCreate inside a form with a submit listener will trigger the submit action when using the Enter key.

This doesn't seem to happen when wrapping a regular PowerSelectWithCreate with the form.

e.g. in the dummy app:

<form {{on 'submit' (action onFormSubmit)}}>
  <PowerSelectMultipleWithCreate
    @options={{countries}}
    @searchField="name"
    @selected={{selectedCountries}}
    @onChange={{action (mut selectedCountries)}}
    @onCreate={{action "createCountry"}} as |country|
  >
    {{country.name}}
  </PowerSelectMultipleWithCreate>
</form>

triggers the onFormSubmit method to be called when pressing the enter key.

I'm currently trying to trigger the Enter in a failing test but it's somewhat complicated 🤔

Seems like manually pressing Enter triggers a submit event on the form element.
If I do it via triggerKeyEvent() it doesn't work.

edit: It seems like the issue is that Multiple adds the input inline while the other one places the search input into the dropdown wormhole.

edit2: It seems like this is the expected behavior for any input inside a form element.
@cibernox do you think it would be a good idea to prevent the enter event inside the power-select trigger from bubbling up?

I'm using a basic setup with power-select-with-create like this:

              {{#power-select-with-create
                    multiple=true
                    options=allTags
                    selected=selectedTag
                    onchange=(action (mut formTag))
                    oncreate=(action "createTag")
                    closeOnSelect=false
                    buildSuggestion=buildSuggestion
                    as |name|
                  }}
                    {{name}}
              {{/power-select-with-create}}

It appears to me that after a new option is created, the searchText is not going away. Is this the intended behavior?

Trying to update the addon to version 0.4.4 and application tests are flooded by messages like this one:

Could not find module `@ember/test` imported from `ember-power-select/test-support/helpers`

Looks like some other dependency has to be updated as well, but I'm not sure which one exactly. Could you please help to figure out?

Version 0.4.3 works fine.

As the latest EPSwC is hard-coded to use EPS 1.5.0, it is throwing some errors with the new Glimmer updates.

cibernox/ember-power-select#866

When using search with ember-concurrency like in the example here:
https://ember-power-select.com/docs/custom-search-action

PowerSelectMultipleWithCreate doesn't prioritize the last request made and instead performs a search request for every key input or change.

optionsArray: computed('options.[]', function() {
    if (!this.get('options')) {
      return [];
    }
    return Ember.A(this.get('options')).toArray();
  }),

this seems to wrong, when promise passed to EPS, EPS-with-create converts it into an array here.
Causes sides effects, like not showing loading message.

Tried this addon out for the first time (v0.1.10) and I'm getting the error:

ember-wormhole failed to render into '#ember-basic-dropdown-wormhole' because the element is not in the DOM

Followed by lots of deprecation warnings

DEPRECATION: A property of <neon-tetra@view:-outlet::ember454> was modified inside the didInsertElement hook. You should never change properties on components, services or models during didInsertElement because it causes significant performance degradation. [deprecation id: ember-views.dispatching-modify-property]

I'm not sure what additional info you would need so please let me know if there is something I can provide to help.

Everything worked fine when using plain ember-power-select. Here is how I have the component setup in the template:

  {{#power-select-with-create
    multiple=true
    search=(action "searchRepo")
    selected=selected
    oncreate=(action "createTag")
    onchange=(action (mut selected))
  as |tag|
  }}
    {{tag.tagName}}
  {{/power-select-with-create}}

I'm using the following versions of Ember and Ember Data:

Ember             : 2.3.1
Ember Data        : 2.3.3
jQuery            : 2.1.4

Need Help!
I was implementing a remote search/create multi selection. Mostly its working except when you try to change search text and place cursor, onclick event clears everything.

Suggested by @Ramblurr. Moved into its own issue from #13 (comment)

I think we could expose an action that does this. E.g.

{{#power-select-with-create
    options=countries
    searchField="name"
    selected=selectedCountry
    oncreate=(action "createCountry")
    showCreateOption=(action "hideCreateOptionOnSameName") as |country|
}}
  {{country.name}}
{{/power-select-with-create}}

actions: {
  hideCreateOptionOnSameName(term) {
    let existingOption = this.get('countries').findBy('name', term);
    return !existingOption;
  },
},

@cibernox What do you think? Does this stay true to the style of other ember-power-select customizations?

In ember-power-select allow to change noMatchesMessage, searchMessage as options. What about option for "Add" message? I need it to translate to another languages . For example:

{{#power-select-with-create
  searchMessage=(t 'Type to search')
  noMatchesMessage=(t 'No results found') 
  loadingMessage=(t 'Loading options...')
  addMessage=?
 ...

I get this error when using ember-power-select-with-create. I am using async search if that matters.

It uses a lot of non octane things like actions hash etc. Any plans on updating this?

It will be useful for the documentation to share the code of this demo https://ember-power-select-with-create.pagefrontapp.com/ .. I've searched for it but I couldn't find it.

Hello! 👋

I have a use-case where I'd like to have a power-select-with-create-suggestion component, to use in all of my invocations of <PowerSelectWithCreate>. Nevertheless, I'd like to change the message in this component. For this, it'd be helpful if the @extra argument would also be passed to the <SuggestedOption> component.

The ember-power-select documentation states the following:

[extra is an] Object to store any arbitrary configuration meant to be used by custom components

The description seems that this argument can solve this problem easily :) What do you think? If you're happy with it, I can open a pull request with the (simple) addition.

Currently using power-select-multiple-with-create component to allow a user to type in email addresses into a list & create them. We have found that sometimes the user forgets to press enter or click the "Add" button in EPS - then the last email address they entered disappears when they click away. Is there a way to save when the user clicks away from EPS instead of forgetting the entry?

Hi,

thnx for the component,
I cannot find info how to customize "add" message, please help.

Thank you

Hello! 👋

I want to use <PowerSelectWithCreate> to have its create functionality, but I'd also like to use the @noMatchesMessage to display a message above the Create "X" option/button.

The problem lies in the fact that the suggested option is added to the results array, making the resultsCount greater than 0. When computing this. mustShowNoMessages, <PowerSelect> considers the suggested option as a result, when it shouldn't be.

I am experiencing some funny behavior after upgrading to Ember 3.3. One of my power-select-with-create components is now not displaying the selected option (but does show it once you select another one).

          {{#power-select-with-create
            search=(action 'searchPeople')
            selected=appreciation.appreciatee
            onchange=(action (mut appreciation.appreciatee))
            oncreate=(action "createNonUserAppreciatee")
            as |user|
          }}
            {{user.name}}
          {{/power-select-with-create}}

The onchange action is working (the relationship is being set) but nothing displays as selected until you select another one. I see no errors in the console and could not find anything about the Ember upgrade (from 2.17) that would cause this. Let me know if you have any ideas. Thank you!

So, I had ember-power-select 1.10 installed, before I installed ember-power-select-with-create. Everything works fine, but my integration tests stopped working. Every test that uses the clickTrigger() function, doesn't work anymore. Clicking manually still works fine

I get this error in console:

Uncaught (in promise) TypeError: (0 , _testHelpers.click) is not a function
    at _callee4$ (helpers.js:219)
    at tryCatch (runtime.js:63)
    at Generator.invoke [as _invoke] (runtime.js:337)
    at Generator.prototype.(:7357/369/tests/anonymous function) [as next] (http://localhost:7357/assets/vendor.js:5435:21)
    at step (helpers.js:91)
    at helpers.js:109
    at new Promise (<anonymous>)
    at helpers.js:88
    at clickTrigger (helpers.js:230)
    at Object.<anonymous> (assigned-users-card-test.js:82)

My working workaround for now is to import click from ember/test-helpers, and overriding the clickTrigger function. It's a really unpleasant solution though

Seems like this addon doesn't work with latest ember-power-select 2.x

I've got Uncaught Error: Assertion Failed: {{power-select}} requires an onchange function for power-select components

My application acceptance tests picked up a regression. The @suggestedOptionComponent option is no longer being evaluated.

The doc currently says to check the power select docs for options, but ember-power-select has a different helper for multiple selects, and does not pass an option. For power-select-with-create, you have to pass multiple=true - I found this out by searching through the issues on this repo. Can the doc please be updated? Also, are there any other options which aren't standard in power-select?

I think the Add option should be the last option, or there should be a setting to have it as the last option. It seems more intuitive to start typing and then hit enter once the first option is what you are looking for. Currently, you have to use the mouse or arrow keys to move past the Add option.

Happens when an ember-power-select-with-create has allowClear=true.

Please refer:
https://ember-twiddle.com/cd70ac43c2f408c18dce05d6b1575f16?openFiles=controllers.application.js%2C

This was working fine in 0.2.6. Updating to 0.4.1 caused this issue.

EPS Version: 1.7.0
EPS-with-create Version: 0.4.1

Currently if the option.__isSuggestion__, ember-power-select-with-create takes over.

For my use case, I want to show an icon and some other helpful information to the user if they are seeing the create option.

I'm requesting that there be some kind boolean property that I can set, (default false), that when true would yield the suggested option just like any other option.

PR to follow.

When triggering the power-select-multiple open when input is entered, only do so in the "afterRender" queue to avoid the "render-double-modify" deprecation warning

Here are some steps to reproduce (with some of my guesses as to why this is occurring):

• Use a power-select-multiple which asynchronously searches (ie: via ajax calls)
• Click on the input field to show results
• Click one of the dropdown results, and at the same time hit a character on your keyboard
• This should simultaneously:
  • Select the clicked option, which will cause the dropdown to close, and the options to be refreshed
  • Trigger the dropdown to re-open, due to the keyboard input

I created a sample repo here which demonstrates the issue - load up the "page" route to try it out.

Here is the warning output:

DEPRECATION: You modified (-join-classes (-normalize-class "concatenatedTriggerClasses" concatenatedTriggerClasses) "ember-view" "ember-basic-dropdown-trigger" (-normalize-class "inPlaceClass" inPlaceClass activeClass=undefined inactiveClass=undefined) (-normalize-class "hPositionClass" hPositionClass activeClass=undefined inactiveClass=undefined) (-normalize-class "vPositionClass" vPositionClass activeClass=undefined inactiveClass=undefined)) twice in a single render. This was unreliable in Ember 1.x and will be removed in Ember 3.0 [deprecation id: ember-views.render-double-modify]

The demo application is not available anymore. It's referenced as https://ember-power-select-with-create.pagefrontapp.com/ both in GitHub repository configuration as in readme. The DNS record ember-power-select-with-create.pagefrontapp.com doesn't seem to exists anymore.

So, showCreateWhen support async result when there is a search action. My problem is how do I access the results of the search in showCreateWhen ?

Probably should move from devDependencies to dependencies in package.json

With the switch to modern octane/glimmer with the 0.9.0 release, ember-power-select-with-create appears to be ignoring my custom triggerComponent. I believe this line in power-select-with-create.hbs:

@triggerComponent={{this.triggerComponent}}

needs to be changed to:

@triggerComponent={{@triggerComponent}}

https://github.com/cibernox/ember-power-select-with-create/blob/master/addon/components/power-select-with-create.hbs#L53

Currently if you are using the search action (instead of options) to populate the drop down list a user can't create a new option until the search action resolves.

For creating tags this means that the user has to wait for the "autocomplete" search to finish before they can create a tag. If the user quickly types the tag and presses enter the typed text just disappears.

Is there anyway to configure it so that a new list option can be created even if the search action is still pending? It feels very clunky to have to know to wait for the "Create new item" message to appear before hitting enter.

To make it more concrete this is my setup

{{#power-select-with-create
    multiple=true
    search=(action "searchTags")
    selected=selectedTags
    oncreate=(action "createTag")
    searchField="name"
    onchange=(action (mut selectedTags))
    as |tag term|
    }}
      {{tag.name}}
{{/power-select-with-create}}

Right now the createTag action can't be triggered until after the searchTags action has resolved. I'd like to allow a user to create a new tag right away without having to wait for the searchTags method to return (it issues a query to the server to function as an autocomplete).

Thanks!

We are seeing this error when trying to update dependencies in an Ember 3.28 application:

Build Error (broccoli-persistent-filter:Babel > [Babel: @embroider/macros]) in @embroider/macros/runtime.js

@embroider/macros/runtime.js: @babel/template placeholder "LOG_VIEW_LOOKUPS": Expected string substitution

This results from an older version of @embroider/utils being included by the 4.x ember-power-select. The recent update to 5.0.4 of ember power select resolved that issue for ember-power-select, but this package still causes that issue. Is it possible to update that dependency?

Updating to latest (0.4.3) version from 0.3.1 I faced the issue. Dropdown content is getting shifted from trigger as if it was rendered in wormhole.

Also in devtools I can see

And when I disable those styles

the dropdown gets back to where it supposed be

The issue only appears for renderInPlace=true. Otherwise it works as expected.

Hi,

I'm not sure what's happening but on my application I've upgraded Ember to 3.2 and power-select-with-create started behaving weirdly... when I select a value, it will not show in the trigger as the selected value. If I swapped power-select-with-create to a regular power-select things start working as before. (meaning that I can see the value)

I've made a reproduction repo, based on the current master repo of power-select-with-create. It's available here https://github.com/corrspt/ember-power-select-with-create/tree/test-issues.

I'm still trying to setup an Ember Twiddle, but this repo (just navigate to localhost:4200 and you can read the description).

Here's a gif of what happens.

Thanks in advance for any pointers in how to solve this, been struggling with this for the past day 😢

Edit: I've created an Ember-Twiddle for this, The Twiddle is here https://ember-twiddle.com/417bca3fb3b46432ba255a608a56555e.

I couldn't create the Twiddle initially but with the help of cibernox, I was able to. Funny thing, in the twiddle, even power select does not work, while locally it does.... weird. But after a second attempt to setting the value, it seems to work.

Edit2: I've since tried to upgrade to Ember 3.3 and downgrade to Ember 3.1 but with no noticeable effect.

Also, locally I'm running Mac OSX 10.12.6 and Chrome 67.

When I use ember-power-select with selected=someAttrs the attributes displays correctly.

But when I switch to using ember-power-select-with-create (just changing the component name, all other attributes stay same), the selected no longer work and the attributes are not displayed any more.

Help?

How can I sort results?

I have them sorted in my search function, but as I narrow the search, my ordering gets tossed out the window. How can I set the sort criteria?

You might want to make a note of this dependency and workaround:

machty/ember-concurrency#21