btecu / ember-select

ember-select

Ready to use and extensible select component

Why not use an existing solution?

Existing components either do too much or too little. I wanted a solution that would work for most cases, while still allows extensibility.

Some issues and dislikes of existing solutions:

• ember-select-box
  • no css, have to style it
  • too abstract, over 50 files
  • multiple ways to do the same (compose, extend, create)
  • api surface very large
• ember-cli-selectize
  • based on a jQuery plugin
  • dependent on bower
  • doesn't work properly with a plain array of objects
  • mutates the model directly
  • style issues (from selectize)
  • selectize not really maintained anymore
• ember-power-select
  • huge api surface
  • very large payload
  • default style based on select2 (ugly)
  • does things that do not belong in a select component, such as data fetching

Size is another issue. While the compressed code might not be huge, it's still code that will have to be executed on the client, which is not great for mobile devices.

Size difference based on Ember 2.8:

	CSS	CSS gzip	JS	JS gzip	Total gzip	Diff gzip
ember-select	2.26 KB	837 B	27.63 KB	4.82 KB	4.83 KB	-
ember-select-box	0	0	47.25 KB	6.27 KB	6.27 KB	+30%
ember-cli-selectize	9.06 KB	1.91 KB	56.29 KB	16.58 KB	18.49 KB	+282%
ember-power-select	6.07 KB	1.27 KB	160.13 KB	31.49 KB	32.76 KB	+578%

ember 2.8
 - size-47970b6d059982b357dbe80cc4712d57.js: 3.82 KB (1.15 KB gzipped)
 - size-d41d8cd98f00b204e9800998ecf8427e.css: 0 B
 - vendor-d41d8cd98f00b204e9800998ecf8427e.css: 0 B
 - vendor-e837a5027df7ab84378241e40df98e4f.js: 656.33 KB (175.75 KB gzipped)

ember-select
 - size-2f65552abd00039f0d5bfa9d0e7a7dcf.js: 5.09 KB (1.25 KB gzipped)
 - size-d41d8cd98f00b204e9800998ecf8427e.css: 0 B
 - vendor-26fa5313284eb3f6427de885adb3c822.js: 682.69 KB (180.47 KB gzipped
 - vendor-d76fdb92394f4633584380340f3b47b0.css: 2.26 KB (837 B gzipped)

ember-select-box
 - size-38dd07aa0fc28c4626ab725f96433857.js: 6.93 KB (1.35 KB gzipped)
 - size-d41d8cd98f00b204e9800998ecf8427e.css: 0 B
 - vendor-757f209cd9572d0bb899921420362ed7.js: 700.47 KB (181.82 KB gzipped)
 - vendor-d41d8cd98f00b204e9800998ecf8427e.css: 0 B

ember-selectize
 - size-26011fdbb8d0fc034b02071c70f76ba7.js: 3.95 KB (1.17 KB gzipped)
 - size-d41d8cd98f00b204e9800998ecf8427e.css: 0 B
 - vendor-30d3db96009d4a13d774196e28bf69e8.css: 9.06 KB (1.91 KB gzipped)
 - vendor-daa7db357610f9f28d4cfb83549b150e.js: 712.49 KB (192.31 KB gzipped)

ember-power-select
 - size-45386a78080a4cd7ad90b4ed4482e451.js: 12.14 KB (2.2 KB gzipped)
 - size-d41d8cd98f00b204e9800998ecf8427e.css: 0 B
 - vendor-70bc39ab67910a4925849ff8b9eae5b7.css: 6.07 KB (1.27 KB gzipped)
 - vendor-78b1f73b38fd153fd0c3509e5b2f2376.js: 808.14 KB (206.19 KB gzipped)

Installation

ember install ember-select

Usage

Basic example:

{{x-select model=options onSelect=(action 'select')}}

Group example (id / name properties):

{{x-select model=groups value=value
  labelKey='name' valueKey='id'
  dropdown='select-dropdown-group'
  onSelect=(action 'select')}}

Available actions

onBlur()

Fired when the input is blurred.

onChange(input)

Fired when input changes.

onClear()

Fired when the input was cleared.
Useful when multiple is enabled.

onCreate(option)

Avaliable when multiple is enabled.
Fired when a new option was created.
Note: Setting this will allow the creation of new options.

onRemove(option)

Available when multiple is enabled.
Fired when an option was removed.

onSelect(value, option, isSelected)

Fired when an option was selected.
value and option are different only when the model is an object.
isSelected is useful if freeText is enabled.

Available options

autofocus

Default: false
Accepts: boolean
Sets the focus on the element.

canSearch

Default: true
Accepts: boolean
Enable search.
Disabling will result in a standard select dropdown.

disabled

Default: false
Accepts: boolean
Disable input.

dropdown

Default: select-dropdown
Accepts: component
Dropdown component to be rendered.
Note: For groups use select-dropdown-group.

freeText

Default: false
Accepts: boolean
Allow any input set and not just a provided option.

labelKey

Default: label
Accepts: string
The property with the label, for objects.

openOnFocus

Default: false
Accepts: boolean
Open the dropdown when input has focus.

placeholder

Default: Type...
Accepts: string
Placeholder text to be displayed.
Note: IE placeholders are disabled because of a bug.

required

Default: false
Accepts: boolean
Revert changes when leaving input if an option wasn't selected.

value

Default: empty string
Accepts: string, option
Selected value.

valueKey

Default: value
Accepts: string
The property with the value, for objects.

values

Default: undefined
Accepts: array
Array of selected values.
Note: Setting this will enable multiple selections.

Model structure

The component accepts both flat and complex (objects) lists.

[
  'Amarillo',
  'Azul',
  'Blanco',
  'Naranja',
  'Negro',
  'Rojo',
  'Rosa',
  'Verde'
]

[
  { value: 0, label: 'Alfa Romeo' },
  { value: 1, label: 'Audi' },
  { value: 2, label: 'Citroën' },
  { value: 3, label: 'Fiat' },
  { value: 4, label: 'Opel' },
  { value: 5, label: 'Peugeot' },
  { value: 6, label: 'Seat' },
  { value: 7, label: 'Skoda' }
]

[
  { value: 0, label: 'Fruit' },
  { value: 101, label: 'Banana', parentId: 0 },
  { value: 102, label: 'Lemon', parentId: 0 },
  { value: 103, label: 'Orange', parentId: 0},
  { value: 104, label: 'Raspberry', parentId: 0 },
  { value: 1, label: 'Vegetable' },
  { value: 111, label: 'Cucumber', parentId: 1 },
  { value: 112, label: 'Eggplant', parentId: 1 },
  { value: 113, label: 'Garlic', parentId: 1 },
  { value: 114, label: 'Onion', parentId: 1 }
]

Note: Groups require a parentId.

ember-select's Issues

No option to bind ID to input

There's currently no way to bind an ID attribute directly to the input. I have opened a pull request with the option to specify an inputId.

#24 Adds input ID

Scrollbar in drop-down list in not wroking in chrome.

ember-select : 0.4.0

Placeholder attribute not adding in DOM in IE11 while adding in Chrome

Code

{{x-select
      model=roleDropdownOptions
      onSelect=(action 'selectRole' (route-action 'onRoleSelected'))
      placeholder='Role'
      value=selectedRole
      valueKey='value'                    
}}

Despite of placeholder added here.
Placeholder attribute is not adding in dom in IE11.

While it's coming in Chrome

Can't search through numbers

If the model is a collection of numbers (as opposed to strings), search breaks.

Reproduction: https://ember-twiddle.com/eca8e02a384168a8504a89afe545ac20?openFiles=twiddle.json%2Ctemplates.components.bug-one.hbs

Cannot clear single select by setting value to empty string or null

If you set the value to empty string or null after choosing making a selection, the code sets label to empty string, but then compares to token. If they are equal it does not update, which is usually the case (unless canSearch is false and user entered values).

Update node dependency for node 13.*

Hello and thank you for sharing this wonderful add-on! :)

Could you fix the dependency to node so it does not limit it up to 12.?
Here is the error I see in the terminal when I run yarn:
[email protected]: The engine "node" is incompatible with this module. Expected version "8. || 10.* || 12.*". Got "13.5.0"

Cheers!

No two-way-binding for value?

I expected x-select to listen to external value changes. In

{{x-select model=repeatOptions value=selectedRepeat onSelect=(action 'selectRepeat')}}

If I reset selectedRepeat to its default value externally, I would expect that the select-box to change to that default value. How can this be achieved?

IE 11 scroller does not work properly

I realized that it does not support IE 11.

Click on a select, click on the scroll (arrows or scrollbar); then it's like if you're clicking outside of the select. Thus, results get undisplayed and unselected.

It quite a bit hard to debug since the select add / remove results from the DOM on an outside click.

Any clue?!

didUpdateAttrs with parameters is deprecated

https://emberjs.com/deprecations/v2.x/#toc_arguments-in-component-lifecycle-hooks

Label is `undefined` when working with ED relationships

We check a value exists before extracting the label / value, however in the case of ember-data relationships, an object exists even for no value, which causes the label to be set to undefined.

how to get selected value?

i have input with attr value=person_id and bind it with onSelect function. when it calls onSelect, i tried this.get('person_id') and got undefined, while other input works fine. sorry im new at this, but how to get selected value with ember-select?

I can't use this in Ember 5.7

Getting this warning in latest ember:

Attempted to resolve x-select, which was expected to be a component or helper, but nothing was found.

ember-cli: 5.7.0

Handle numbers instead of string

Currently is doing .toLowerCase() on the token, which could be a number.

Handle `async` better

• It should not require to use model.content when using a relationship (proxy)
• It should handle async loads (updates) more graciously

`canSearch` prevents resetting the value

When the flag canSearch is enabled, changing the value doesn't update the input text (token?) - at least.

Reproduction:
https://ember-twiddle.com/ec3d88d5fd7136a79ba9607bf3334014?openFiles=components.bug-two.js%2C