zestia / ember-select-box Goto Github PK

I'm getting following error in console when running app with fastboot.

There was an error running your app in fastboot. More info about the error:
 TypeError: Cannot read property 'trim' of undefined
...
ember-select-box/mixins/select-box/select-box/searchable.js:13:1

Looks like the addon is trying to get jQuery.trim but jQuery is unavailable in fastboot mode.

Hey, awesome, awesome package!

I just have one quick question. I see that by default, in order to show a label, the code looks to accept an object as a value, and uses a label-key off of that to display the label in the dropdown. Was there any reason why it doesn't just allow passing a label property into the sb.option component? ie:

{{sb.option value="A" label="Apple"}}

Hello! I am looking at implementing this addon in my application for some selections in dropdowns.

I think it would be beneficial to this addon to provide the trigger component as a modifier, that way we can use any element as the trigger, and not require the default div element wrapper around the element that we actually want to be the trigger.

I made a few points for this in the ember-basic-dropdown repo when I asked & implemented the same thing a few years ago
cibernox/ember-basic-dropdown#589

TLDR I'd like to see something like this be possible

<SelectBox ... as |sb|>
  <MyInputButton class="some-class" @size="lg" {{sb.TriggerModifier}} >{{sb.value}}</MyInputButton>
  <sb.Options> ... </sb.Options>
</SelectBox>

If this is already do-able somehow, please let me know!

You can reproduce with your own tests. Just checkout version 14 and run tests.

Uncaught Error: Assertion Failed: You attempted to update `tabIndex` on `SelectBox`, but it had already been used previously in the same computation.  Attempting to update a value after using it in a computation can cause logical errors, infinite revalidation bugs, and performance issues, and is not supported.

`tabIndex` was first used:

Stack trace for the update:
    at setter (validator.js:833)
    at SelectBox.set [as tabIndex] (index.js:3908)
    at enable (disabled.js:23)
    at receiveDisabled (disabled.js:13)
    at new SelectBox (index.js:199)

Hi! I've tried to install this on 1.13.10 and had no success:

"Uncaught Error: Could not find module ember-component imported from ember-cli-select-box/components/select-box/native"

What is minimal Ember.js version supported?

First of all thanks for this addon. I'm always using latest version.

I have a NativeSelectBox like this. I don't know if ember responsible or not but my value is proxy object because of models belongs_to relation and changeset.

This selectbox was working before but not anymore. I've researched deeply and found out that I was using changeset 2.x and I've updated to 3.x recently. Somehow changeset's pxoxy objects slightly different between 2.x and 3.x.

Long story short NativeSelectBox doesn't show selected object with ember-changeset 3.x

Thank you.

          <NativeSelectBox
            id={{el.id}}
            class="custom-select {{el.validation}}"
            @value={{el.value}}
            @onSelect={{fn this.updateLocationType}} as |sb|
          >
            <sb.Option @value="">
              Konum Tipi
            </sb.Option>
            {{#each @locationTypes as |locationType|}}
              <sb.Option @value={{locationType}}>
                {{locationType.name}}
              </sb.Option>
            {{/each}}
          </NativeSelectBox>

Just wondering if it would be easy to yield on the api the currently active option to conditionally set a class.
That way we could do something like:

{{#each @options as |o|}}
  <sb.Option class={{if (eq sb.activeOption o) "bg-primary-200"}} @value={{o}}>

another alternative could be (inspired by ember's built-in <LinkTo/> component):

{{#each @options as |o|}}
  <sb.Option @activeClass="bg-primary-200" @value={{o}}>

Hi!

We use ember-a11y-testing to ensure some technicalities in the a11y of the components/pages we develop. We recently upgraded to the last major of this addon (we were late by a lot though) and it appears there are multiple violations in the current state of the addon.

Have you tried testing it?

I'm pasting the list we have on a very basic a11y test of the component & 3 options + a label:

The page should have no accessibility violations. Violations:

[critical]: Elements must only use allowed ARIA attributes 
Violated 1 time. Offending nodes are: 
<div data-component="select-box" aria-expanded="false" aria-busy="false" aria-disabled="false" aria-multiselectable="false" id="ID-select-box" role="combobox" tabindex="-1">
https://dequeuniversity.com/rules/axe/4.2/aria-allowed-attr?application=axeAPI

[critical]: Certain ARIA roles must be contained by particular parents 
Violated 3 times. Offending nodes are: 
<div data-component="selected-option" aria-current="false" id="select-box-el-ID1" role="option">
<div data-component="selected-option" aria-current="false" id="select-box-el-ID2" role="option">
<div data-component="selected-option" aria-current="false" id="select-box-el-ID3" role="option">
https://dequeuniversity.com/rules/axe/4.2/aria-required-parent?application=axeAPI

[critical]: ARIA attributes must conform to valid values 
Violated 1 time. Offending nodes are: 
<input data-component="input" aria-multiline="false" autocomplete="off" role="searchbox" aria-controls="select-box-el-ID4" id="ID-linked-input-chips" type="text">
https://dequeuniversity.com/rules/axe/4.2/aria-valid-attr-value?application=axeAPI

[serious]: Ensure interactive controls are not nested 
Violated 3 times. Offending nodes are: 
<div data-component="selected-option" aria-current="false" id="select-box-el-ID1" role="option">
<div data-component="selected-option" aria-current="false" id="select-box-el-ID2" role="option">
<div data-component="selected-option" aria-current="false" id="select-box-el-ID3" role="option">
https://dequeuniversity.com/rules/axe/4.2/nested-interactive?application=axeAPI

Would love to see more robust keyboard control support for this, seems like the Single select example has some, although it appears to be a bit buggy (when switching between mouse and keyboard selection, movement between items with the arrow keys is sometimes incorrect, arrow key selection also causes the window to scroll). However, the Filter select and Search select examples do not look like they have any keyboard support (pressing the down arrow from the input box does not allow me to select from the available options like I would expect).

The current implementation does not allow full control over all class names. We use Tailwind in our projects and we try to avoid creating custom classes when possible.

What do you think about adding a theme object similar to ember-yeti-table?

Hey @amk221. you guys mind exposing the mixins inside of the app folder to the consumer? It's preventing me from upgrading since there was quite a bit of code relying on those.

I just tried to set the title attribute of one of my select-box.native components and the title attribute is not appearing in the markup. Can we add that to the component's attributeBindings array?

Workaround (in your app/app.js)

import EmberSelectBoxNative from 'ember-select-box/components/select-box/native';

// technique from http://stackoverflow.com/a/20293724/545137
EmberSelectBoxNative.reopen({
  attributeBindings: ['title']
});

Hey folks! Thanks for the cool addon and the latest refactoring! 👏

One minor thing came to my mind when I had a look at the currently failig CI:

I think the added performance test is not very meaningful, since you are also testing "how fast can we produce 10.000 array entries". Shouldn't we measure only the time when render-begin to render-end?

Further why add a minimum time for that test?

Cheers

Hi,

According to your package.json versionCompatibility this add-on is suppose to be compatible with ember >= 2.3.0

I tried to integrate it and I faced multiple issues using ember 2.4.6.
So I decided to clone this repo, configured ember-try for ember 2.4 and here are my first test result:

# tests 407
# pass  226
# skip  0
# fail  181

I noticed that many errors came from missing polyfill.
So I decided to add ember-factory-for-polyfill & ember-assign-polyfill.
Then I reran the test:

# tests 391
# pass  244
# skip  0
# fail  147

Again most tests fails are related to one error:

Uncaught Error: Assertion Failed: You must use Ember.set() to set the `element` property (of <dummy@component:select-box::ember995>) to `[object HTMLDivElement]`.

I narrowed down this issue to this line https://github.com/zestia/ember-select-box/blob/master/addon/templates/components/select-box.hbs#L40 .
If I completely remove this line element=this.element here are my tests:

# tests 322
# pass  309
# skip  0
# fail  13

Not perfect but usable as failing tests aren't related to the add-on core functionality.
This line of code has been introduced in this commit 2f95ac6 (for the 4.0.0 version of ember-select-box)

So what's the real compatibility with previous ember versions of this add-on?
Will you accept PR which fix compatibility? Even if it breaks current api?

You can find my work here: https://github.com/ctjhoa/ember-select-box

Thanks

Hello,

I'm trying to create a ember-bootstrap form control type by extending your select-box/native, which would be used as follows;

            {{form.element controlType="select-one" label=(t 'model.address.country') property="consumer.address.country" showValidation=true
                           options=countriesCollection}}

by creating a component named select-one at pods/components/bs-form/element/control/select-one this will work.

import ControlValidationMixin from 'ember-bootstrap/mixins/control-validation';
import SizeClass from 'ember-bootstrap/mixins/size-class';
import SelectBoxControl from 'ember-select-box/components/select-box/native';

export default SelectBoxControl.extend({
  classTypePrefix: 'form-control',
  classNames: ['form-control'],
  actions: {
    select(value) {
      this.get('onChange')(value);
    }
  },
});

The component works as via;

                {{#bs-form/element/control/select-one as |sb|}}
                    {{#each countriesCollection as |option|}}
                        {{sb.option value=option.value label=option.label}}
                    {{/each}}
                {{/bs-form/element/control/select-one}}

However with the form.element controlType='select-one' there is now 'block'. This works thus far as I have a native select tag, which validates and has the correct classes...

Looking through your code it seems that {{sb.option ..}} registers itself as option component in the select-box via its template that has a yield statement. Since there is no hasBlock this seems not ok?

Can that be done programmatically?
Am I approaching this correctly?

I have a case with a native select box that renders like a hundred of options, and with select-box/native it takes like 300-400ms to do that.

So I was wondering if that can be improved and my idea was to render the options in bulk within a single component. I know that this is much less "ember way", but that seems to be 5-6x faster then original approach.

Do you think having that would be valuable for the project? Here is the commit with a draft version: https://github.com/simplepractice/ember-select-box/commit/c94aa0e0711d7a3d3dc969201f32d9ccb7df36ac

Thanks!

Hi there!
I came across this nice package and it seems like it's exactly what I was looking for - thx!

My issue is, that I I'm not able to use a native select with native <option>s to hold an object as a value.
For example:

<NativeSelectBox @onSelect={{fn (mut this.selectedContinent)}} as |sb|>
  {{#each @model.continents as |c|}}
    <sb.Option @value={{c}}>
      {{c.name}}
    </sb.Option>
  {{/each}}
</NativeSelectBox>

The value should hold the whole continent model but it's just the string representation of the model itself:

value="<ember-boilerplate@model:continent::ember426:AF>"

The strange thing is: I looked at your examples, inspected the example and the values of that first select do have objects as values 😳

value="[object Object]"

Do you have any idea what I'm doing wrong?

Thanks in advance! 🙏

Would it be acceptable to have select-box/input.js extend Ember's TextField class to have it behave like the {{input}} helper and pass all properties that the {{input}} helper allows?

Hello everyone!

I am working on an ember-cli application ( ember-cli version: 0.2.7 ). When I try to use the addon according to your examples, I get the following error:

Could not find module ember-component imported from ember-cli-select-box/components/select-box/native

I just installed the component and used it as in the example

{{#select-box/native as |sb|}}
  {{sb.option value=1 label='One'}}
  {{sb.option value=2 label='Two'}}
  {{sb.option value=3 label='Three'}}
{{/select-box/native}}

with no additions. I Tried to "fix" this by importing "Ember" in the component end extend Ember.Component ( which worked ), but then the next "import" failed with the same kind of error.

Any ideas/suggestions?

Thank you for your time :)

I'm not sure why name is not on that list since that's something that <select> allows. For me, it would be useful so I can use Capybara's select method with from option: http://www.rubydoc.info/github/jnicklas/capybara/master/Capybara/Node/Actions#select-instance_method

I could open a PR if that change is ok with you. Thanks!

Hey Andrew,
Still absolutely loving this component...

Just bumped into a situation where I wanted to take advantage of a select box's autofocus attribute. Currently, we don't have that bound to the select-box.native.

Worked around once again by placing the following in my app/app.js

import EmberSelectBoxNative from 'ember-select-box/components/select-box/native';
EmberSelectBoxNative.reopen({
  attributeBindings: ['autofocus']
});

I can put a PR together for an official fix if you'd like.

Looking at your source I think you've taken care of most other required attributes: http://www.w3schools.com/tags/tag_select.asp