Hi,

When I have a power-select with multiple=true and allowClear=true the little cross to remove the items is not shown. If I put multiple=false the cross appears correctly

Apparently it is possible to translate from sass to less with not much effort, so this might come handy for someone.

The workflow would be:

• The styles of the addon are coded in Sass as usual.
• The same compile-css.js script that is used to transform the .scss files to .css ones and move them into vendor can be used to also transform them into .less files.
• Unlike .css files, .less files should not be placed inside vendor but inside app/styles, next to the sass ones, so the user can import them as usual.

On production builds, installation page, vendor.css is also replaced by the vendor filename:

https://ember-power-select.pagefrontapp.com/docs/installation

We need to, somehow, escape this.

With system select boxes and other plugins it's almost always possible to select items by pressing the tab key.

As well as selecting the currently highlighted option, the default behaviour of moving focus to the next input should be kept unless it's a multi-select in which case the item should be selected and focus kept.

When we set disabled=true and multiple=true the component still renders the input box and allows typing on it. Although the search box does not appear 👍

{{#power-select options=names allowClear=true disabled=fieldsDisabled  selected=name onchange=(action (mut name)) multiple=true as |name|}}
    {{name}}
{{/power-select}}

This is the html generated when multiple and disabled are true

A handy feature in multiple selection would be to keep the dropdown open when selecting stuff.

Example: https://brianreavis.github.io/selectize.js/ (Under "E-mail contacts")

Ability for control to accept a "new item" (especially in multi mode or search mode) so that the UI takes input from the user, and later triggers events which can help creation of the input which user provided.

Although in general i'm agains incrementing the API surface of the component, I think this is a reasonable addition.

It's possible to debounce searches by the user, but what would involve a double nested promise, while in the component side is trivial to implement.

Something on the line of debounceSearch=200 (time in milliseconds)

Is there currently support for adding a custom option similar to the create-item action on ember-cli-selectize?

We tried out ember-power-select instead of ember-cli-selectize for one of our components today, but the acceptance tests fail with TypeError: 'null' is not an object (evaluating 'dropdown.removeEventListener').

The Error happens here (there is only one big vendor.js when debugging with the PhantomJS debug port):

var dropdown = this.appRoot.querySelector('.ember-basic-dropdown-content');
dropdown.removeEventListener('DOMNodeInserted', this.repositionDropdown);

In Chrome everything runs fine.

Example:

{{#ember-power-select placeholder="This should be shown..." multiple="true" ...}}

So I'm just following the example

Template

 {{#ember-power-select selected=destination options=cities onchange=(action "chooseDestination") as |name|}}
    {{name}}
 {{/ember-power-select}}

JS

import Ember from 'ember';

export default Ember.Controller.extend({
  cities: ['Barcelona', 'London', 'New York', 'Porto'],
  destination: 'London',

  actions: {
    chooseDestination(city) {
      this.set('destination', city);
      console.log('!!!!!!!!!', this.get('destination'));
    }
  }
});

Error when I go to the route

    Uncaught Error: Assertion Failed: {{ember-power-select}} requires an `onchange` function_emberMetalCore.default.assert @ ember.debug.js:5342didInitAttrs @ ember-power-select.js:32_emberRuntimeSystemObject.default.extend.trigger @ ember.debug.js:47356superWrapper @ ember.debug.js:22381Renderer.componentInitAttrs @ ember.debug.js:12210_emberViewsViewsCore_view.default.extend.init @ ember.debug.js:49793superWrapper @ ember.debug.js:22377superFunction @ ember.debug.js:17850_emberViewsViewsView.default.extend.init @ ember.debug.js:46668superWrapper @ ember.debug.js:22377Class @ ember.debug.js:37284ClassMixinProps.create @ ember.debug.js:37720(anonymous function) @ ember.debug.js:10014createComponent @ ember.debug.js:10031ComponentNodeManager.create @ ember.debug.js:9771componentHook @ ember.debug.js:7953handleRedirect @ ember.debug.js:51003block @ ember.debug.js:50975_htmlbarsUtilObjectUtils.merge.block @ ember.debug.js:50206RenderResult.populateNodes @ ember.debug.js:51871RenderResult.render @ ember.debug.js:51808render @ ember.debug.js:51627(anonymous function) @ ember.debug.js:52417renderAndCleanup @ ember.debug.js:52454block @ ember.debug.js:52415(anonymous function) @ ember.debug.js:10193instrument @ ember.debug.js:10719ViewNodeManager.render @ ember.debug.js:10180exports.default.render @ ember.debug.js:9285handleKeyword @ ember.debug.js:51067keyword @ ember.debug.js:51192exports.default @ ember.debug.js:9147handleKeyword @ ember.debug.js:51028handleRedirect @ ember.debug.js:51014inline @ ember.debug.js:51157_htmlbarsUtilObjectUtils.merge.content @ ember.debug.js:50227RenderResult.populateNodes @ ember.debug.js:51875RenderResult.render @ ember.debug.js:51808render @ ember.debug.js:51627(anonymous function) @ ember.debug.js:52417renderAndCleanup @ ember.debug.js:52454block @ ember.debug.js:52415keywords.yield @ ember.debug.js:51238handleKeyword @ ember.debug.js:51028handleRedirect @ ember.debug.js:51014inline @ ember.debug.js:51157_htmlbarsUtilObjectUtils.merge.content @ ember.debug.js:50227RenderResult.populateNodes @ ember.debug.js:51875RenderResult.render @ ember.debug.js:51808render @ ember.debug.js:51627(anonymous function) @ ember.debug.js:52417renderAndCleanup @ ember.debug.js:52454block @ ember.debug.js:52415keywords.yield @ ember.debug.js:51238handleKeyword @ ember.debug.js:51028handleRedirect @ ember.debug.js:51014inline @ ember.debug.js:51157_htmlbarsUtilObjectUtils.merge.content @ ember.debug.js:50227RenderResult.populateNodes @ ember.debug.js:51875RenderResult.render @ ember.debug.js:51808render @ ember.debug.js:51627(anonymous function) @ ember.debug.js:52417renderAndCleanup @ ember.debug.js:52454block @ ember.debug.js:52415(anonymous function) @ ember.debug.js:9915instrument @ ember.debug.js:10719ComponentNodeManager.render @ ember.debug.js:9908componentHook @ ember.debug.js:7965handleRedirect @ ember.debug.js:51003block @ ember.debug.js:50975_htmlbarsUtilObjectUtils.merge.block @ ember.debug.js:50206RenderResult.populateNodes @ ember.debug.js:51871RenderResult.render @ ember.debug.js:51808render @ ember.debug.js:51627(anonymous function) @ ember.debug.js:52417renderAndCleanup @ ember.debug.js:52454block @ ember.debug.js:52415keywords.yield @ ember.debug.js:51238handleKeyword @ ember.debug.js:51028handleRedirect @ ember.debug.js:51014inline @ ember.debug.js:51157_htmlbarsUtilObjectUtils.merge.content @ ember.debug.js:50227RenderResult.populateNodes @ ember.debug.js:51875RenderResult.render @ ember.debug.js:51808render @ ember.debug.js:51627(anonymous function) @ ember.debug.js:52417renderAndCleanup @ ember.debug.js:52454block @ ember.debug.js:52415(anonymous function) @ ember.debug.js:10193instrument @ ember.debug.js:10719ViewNodeManager.render @ ember.debug.js:10180exports.default.render @ ember.debug.js:9285handleKeyword @ ember.debug.js:51067keyword @ ember.debug.js:51192exports.default @ ember.debug.js:9147handleKeyword @ ember.debug.js:51028handleRedirect @ ember.debug.js:51014inline @ ember.debug.js:51157_htmlbarsUtilObjectUtils.merge.content @ ember.debug.js:50227RenderResult.populateNodes @ ember.debug.js:51875RenderResult.render @ ember.debug.js:51808render @ ember.debug.js:51627(anonymous function) @ ember.debug.js:52417renderAndCleanup @ ember.debug.js:52454block @ ember.debug.js:52415(anonymous function) @ ember.debug.js:10193instrument @ ember.debug.js:10719ViewNodeManager.render @ ember.debug.js:10180renderHTMLBarsBlock @ ember.debug.js:10985_emberMetalMixin.Mixin.create.renderBlock @ ember.debug.js:44326Renderer_prerenderTopLevelView @ ember.debug.js:12105Renderer_renderTopLevelView @ ember.debug.js:12114Queue.invoke @ ember.debug.js:908Queue.flush @ ember.debug.js:974DeferredActionQueues.flush @ ember.debug.js:770Backburner.end @ ember.debug.js:160Backburner.run @ ember.debug.js:228Backburner.join @ ember.debug.js:263run.join @ ember.debug.js:20280run.bind @ ember.debug.js:20343jQuery.Callbacks.fire @ jquery.js:3148jQuery.Callbacks.self.fireWith @ jquery.js:3260jQuery.extend.ready @ jquery.js:3472completed @ jquery.js:3503

1. Go to http://www.ember-power-select.com/docs/multiple-selection
2. Select an item
3. Remove the item
4. "null" appears as the placeholder

Just tried to install the component after the inspiring presentation at Ember Camp. The install attempted to overwrite my existing app.scss (with the content @import "ember-power-select";), but did not install ember-power-select.scss (despite this file clearly being available in the repository).

This is also perhaps not in line with the instructions, which indicate that we should manually add @import "ember-power-select" into our app.scss file.

Possibly another aspect of issue 58?

The component looks amazing - hope the feedback is useful (and apologies if its me just being useless!)

Apparently there is no consensus about that even in native elements

• In webkit/blink pressing down or up opens the list of options (and from that point on behaves as expected)
• In firefox pressing up/down selects the previous/next option but without opening the list
• In selectize.js pressing down opens the list but pressing up does nothing (however the event is highjacked because it prevents the page from scrolling)
• In select2 nothing happens and the page scrolls

/cc @miguelcobain

Awesome component btw. Amazing how far this has come in a short amount of time.

(https://github.com/cibernox/ember-power-select/blob/master/addon/components/power-select/multiple.js#L82)

Is there any future plans to open up an api to allow the specific removed option to be passed to a removal function? In our case, we have a lot of specific logic that needs to be applied to this removed option. It seems our only choice right now for an onchange action is to compare the newSelection to what currently exists in our application and then applying that specific logic to the derived missing objects (those objects that don't exist in the newSelection vs. what exists locally).

Is this type of feature something you would be open for a pull request?

CSS:

.container {
  align-items: center;
  display: flex;
  flex-direction: row;
}

HBS:

<div class="container">
    <span>Search By:</span>
    {{#ember-power-select
    onchange=(action (mut searchKey))
    options=searchTypes
    selected=searchKey
    as |type|}}
        {{type.label}}
    {{/ember-power-select}}
</div>

Screenshot:

At the moment if you want to opt out to some default you need to explicitly pass an option on every component invocation. There is no way of, by example, disabling the search to for all selects in one place.

Basic plan:

ENV['ember-power-select'] = {
  searchEnabled: false,
  loadingMessage: 'Loading results...'
}

// This options will get merged in the class extension, becoming the new defaults.

Can you please elaborate in the docs about how to use this with data that is in the store? It is great so far to follow along and build an example using static arrays set in the controller, but when it comes to more real world usage where the array is coming from the store, things get blurry fast (especially for those of us who are still getting used to Ember!).

Let me know if there is anything I can do to help! This project already has stellar docs, so it'd be great to make them even better.

Thanks!

Use {{component helper to render user custom templates.

An alternative would be a triangle with css.

Syntax highlighting is terrible at the moment.

I followed example from official documentation page with a simple names array. I've declared simple foo action with coffeescript:

foo: ->
  console.log('foo')

and assign it with emblem in template like this:

power-select options=names onchange="foo" as |name|
    li = name

I've tried also to set it this way:

power-select options=names onchange=(action "foo") as |name|
    li = name

In both examples I get:
Assertion Failed: {{ember-power-select}} requires an onchange function I thought it might be an issue with emblem but hbs gave me same result. Important thing to add is the fact that action is set properly because using it with a button and click action work fine.

I think we're not quite there yet:

• The inner input doesn't have a border-radius
• Multiple selection doesn't show the blue focus box-shadow
• Normal bootstrap inputs have an inset box shadow (box-shadow: inset 0 1px 1px rgba(0,0,0,.075);)
• Input and buttons have a fixed default height of 34px. I imagine having inputs and power-selects side-by-side, it would be strange if they don't have the same height.
• Dropdown should have a padding-top and bottom of 5px besides the 2px margin that separates it from the trigger.
• Each dropdown item is also different. They have a height of 26px in bootstrap, it seems. Also paddings are different.
• Option group headers should use bootstrap's dropdown headers: http://getbootstrap.com/components/#dropdowns-headers
• Caret down is different
• In multiple selection, I feel the label color for each selected option is too dark, but I didn't find a bootstrap color for it yet.
• We should use font-family: inherit on input's to force the browser to use the default font-family.
• I think that the selected option should have a primary color.

Gather ideas and non trivial patterns to implement to give a curated solution in the cookbook

Not all selects can be transformed into native selects, but for those that can it might be a nice addition. Obviously as an opt-in behaviour.

At the moment the blueprint attempts to add an app.scss unconditionally, regardless of if the project uses sass or not.

A better solution would be to only do so if the user is a sass user (by detecting the presence of ember-cli-sass) and append a couple lines to the existing app.scss (or create it if not present).

I am not sure if its a bug with ember power select. I posted this on stackover flow with no luck
http://stackoverflow.com/questions/33553070/ember-power-select-requires-onchange-function-errror

If it wasn't for the special cases for handling multiple mode the code would be much easier to follow, and there is still a few use cases of the multiple mode that are not implemented (create new "tags" with free text is a complicated one)

Perhaps split the multiple mode into a different component extends or composes the basic one make sense. It would also make the templates simpler (and theoretically more performant too).

Idea:

{{#ember-power-select-multiple options=options selected=selected as |option|}}
  {{option}}
{{/ember-power-select-multiple}}

The rest of the API remains the same (but configuration options that only concern to multiple mode don't pollute the regular select).

Using Firefox on OS X:
It seems to work fine using Safari.

Hi,

First of all, great library! Very much needed something like this in Ember.

I have a promise array that I want to show in a dropdown, which is fetched in my afterModel method (using this.store.findAll('topic')). This promise is resolved and stored on a controller field called allTopics. When I show these topics as follows:

{{#ember-power-select options=allTopics selected=model.topics onchange=(action "setTopics") multiple=true as |topic|}}
    {{topic.name}}
{{/ember-power-select}}

I get 'No Results Found' the first time I click on the dropdown. When I click away and click on the select box again, the dropdown appears and shows all my topics. So basically, for some reason the options field in ember-power-select only resolves to the actual topics after the first click. Is this a bug? Maybe related to multiple=true?

This happens on Ember 2.0 with an ember-data (2.0) object coming from Rails AMS.

I've just started using your addon today. So far it's been pretty awesome!

I've just run into an issue however with the multiple selections. Once you make a choice with the keyboard (pressing enter) the dropdown doesn't reappear after typing further, until you press enter again or backspace.

A video of this is here: https://vid.me/Q3o2

Additionally where I've been using it with async search functionality pressing enter again doesn't make the the results appear. Instead only back space works to make the dropdown reappear.

Keep getting:
Uncaught Error: Assertion Failed: {{ember-power-select}} requires an onchange function

Here is my template:

{{#ember-power-select onchange=(action "somethingSelected") search=(action "searchLineup") selected=selected as |le|}}
      {{le.name}}
{{/ember-power-select}}

And in my controller:

actions: {
    somethingSelected(){

    },
    searchLineup(term) {
    if (Ember.isBlank(term)) {
        return [];
    }
       //....
    }
}

After I type one character in 'a', it shows results which works great. But then I try to filter it more by typing 'l' and it locks up the browser and I end up having to close the tab.
My normal template

{{#type-ahead modelName='friend' selection=taggedFriends multiple=true placeholder="Tag a friend" as |item|}}
{{item.name}}
{{/type-ahead}}

The component

import Ember from 'ember';
// import DS from 'ember-data';

export default Ember.Component.extend({
    selection: null,
    modelName: null,
    filter: null,
    optionLabelPath: 'name',
    multiple: false,
    placeholder: 'Select an item',
    actions: {
        getData: function(filter) {
            return this.store.query(this.get('modelName'), { name: filter });
        }
    }
});

The component template

 {{#power-select search=(action "getData") searchField=optionLabelPath multiple=multiple selected=selection onchange=(action (mut selection)) as |item|}}
      {{yield item}}
 {{/power-select}}

Epic task, but very valuable.

• Investigate and isolate differenced in markup and behavior that can be abstracted.
• Just Do It ™

On http://www.ember-power-select.com/docs/the-list just above "The empty state" header, the word dropdown is misspelled.

Currently we don't mutate the selected property.
I understand that this is to conform with Ember's "data down actions up", and it makes total sense.

But one thing that I found is that this may not apply to every case, even in React land, were this concept somewhat originated. {{mut properties will be around and people may want to use them.

This issue has been raised before at ember-cli-selectize.
Please read the follwing comment and the respective links: miguelcobain/ember-cli-selectize#66 (comment)

Think about a long form with many selects. It would very cumbersome to write an action to each select instance. I think it would be a step backwards.

Do closure actions solve this?

Still, I have an app which is heavily form based. Has a very complex data model and has dozens of selects. It would still be cumbersome to have even one action per controller.

My suggestion is that we should mutate selected property only if onchange action wasn't specified.

Hi, I noticed that the scss variable $ember-power-select-text-color is set but never used. So at the moment, setting this in our app will not change the styles of the plugin.

I get this when I click on the dropdown, when passing in data with Ember Data 2.0:

Uncaught TypeError: _this2.matcher is not a functionmatcher @ base.js:139filterOptions @ group-utils.js:96refreshResults @ base.js:142onOpen @ base.js:71closureAction @ ember.debug.js:21946open @ ember-basic-dropdown.js:91toggle @ ember-basic-dropdown.js:78toggle @ ember-basic-dropdown.js:58closureAction @ ember.debug.js:21946

Accesibility matters. This is a must.

Not completely sold because it doesn't add any value other tab being more concise for very simple use cases, but still worth considering

First off just wanted to say this addon looks awesome. Love the idea of "built from the ground up in Ember", but I need some help getting it to work.

I Just updated our app to use Ember 1.13.9 to try out ember-power-select.

The Issue
When I click the trigger nothing pops down. Here's a screenshot: http://d.pr/i/1kldg

I've tried passing an empty list with a noMatchesMessage which doesn't show either. Also tried the {{else}} method for an empty list.

Here's my code:
template

{{#ember-power-select placeholder="Filter By Location"
                      options=options
                      selected=selectedLocation
                      noMatchesMessage="Type to Filter By Location"
                      search=(action "searchLocations")
                      onchange=(action "selectionChanged") as |location|}}
       {{location.name}}
{{else}}
       No Results
{{/ember-power-select}}

controller

options: ['Choice 1', 'Choice 2']
actions: {
    selectionChanged: ->
      debugger

    searchLocations: ->
      debugger
}

Also
I also noticed when inspecting the examples in the docs, the "No Results" text should be populating in the ember-view element that is the dropdown. Here is a screenshot showing mine has nothing in it:
http://d.pr/i/123mA

• Overview
• Installation
• How to use it
• Action handling
• Groups
• Multiple selection
• The trigger
• The list
• The search
• Styles
• Asynchronous search

HI

In my acceptance test I want to provide the first 3 chars of a search and then select from the suggestions - the tests use Mirage for fetching remote data. My UI only has one power select.

So far I have tried:

click('.ember-basic-dropdown-trigger');
fillIn('.ember-power-select-trigger-multiple-input', 'pyr');

However that doesn't seem to trigger the power select to fetch suggestions?

Whats the correct way to do this in tests?

Cheers :)

Ideally a blueprint should add a commented

@import 'ember-power-select';

to app.scss automatically when the addon is installed in a project with ember-cli-sass installed

There is no reason for this addon to not be compatible with Ember 1.13 other than me being sloppy.