choices-js / choices Goto Github PK

Is there a easy way to just set height/width ?
Or get it to follow the select you add it too?
Or do you have a bootstrap theme so it really looks like it belongs with the rest of the form elements?

Thx, looks really cool, love its vanilla js

I have something like this:

<label>
   <select id='x'>...</select>
</label>

new Choices(document.getElementById('x'))

But I can't click it. I can press spacebar on it just fine, though.

It seems like it opens the dropdown, then closes it immediately:

            } else if (this.passedElement.type === 'select-one' && target !== this.input && !this.dropdown.contains(target)) {
              this.hideDropdown(true);
            }

this is indeed !== this.input. and this.dropdown indeed doesn't have target:

What happens here is that two click events happen.

Hi,

When using Choices in 'multiple mode', the "Loading..." text is not replaced if "placeholderValue" is not set or if 'placeholder' is set to "false".

Thanks.

The main dist file doesn't export a useful value. It simply gives you {}.

import Choices from 'choices.js'
new Choices()  // Error: Choices is not a function
console.log(Choices)  // => Object {}

Same effect with require().

var Choices = require('choices.js')
new Choices()  // Error: Choices is not a function
console.log(Choices)  // => Object {}

What it actually does is export window.Choices. This works, contrary to commonjs expectations:

require('choices.js')
new window.Choices(element)

cc @akosipc who first encountered this bug.

On https://joshuajohnson.co.uk/Choices/ under "Email addresses only" type the following

[email protected]

the "Hit enter to" will appear, but just hit backspace to make the text input look like

[email protected]

And the "Hit enter to" will still be there but hitting enter won't do anything which is a bit confusing.

When on mobile the drop down should only flip if there is no space beyond the document height rather than the viewport height. This avoids the drop down changing between being above and below the input when a choice is selected. The search should also always be visible within the viewport (possibly scroll to the input upon focus).

Frameworks like Vue.js rely on certain DOM nodes to not be removed by third-party code to work properly. (See vuejs/vue#3302). I think simply hiding the original DOM node would be a better option here. Thoughts?

Hi!
Not necessarily a bug, but a difference in behavior than other browsers - when selecting a single-select in IE11, the dropdown remains open, compared to Chrome, Firefox, and Safari (latest) it's closed on selection. I'll see if I can spot anything unless you come across anything quicker. Thanks!

Hi,
Appreciate all the hard work going on here! Noticed something a little odd when interacting with the dropdowns with my keyboard; when I attempt to filter a list, the current selected position seems to jump around a bit.

The above is with remote sources, but I've also seen this happen with Multiple Select Input. Thanks!

Hey!
Wanted to bring up more a discussion rather than an issue, but I recently read through https://nolanlawson.com/2016/08/15/the-cost-of-small-modules/ which had some interesting insights into some of the extra "stuff" Webpack can wrap around your code which can sometimes lead to larger file sizes - and wanted to get your take. About to do some integration work with Choices to replace Chosen (which relies on jQuery), but noticed the distributed size is about the same of both Chosen and jQuery combined - and it came across a little odd. Thanks!

when we try to use choices.js with requirejs the lib is loaded but, no return is provided.

To demonstrate the problem I have created a sample project to show how I am trying to use choices with requirejs

https://github.com/herbertpimentel/choicesjs_test

to run this you just need:

Install bower globally using npm

> npm install -g bower 

Install the bower dependences

>bower install 

As I hove you will see choices is successful loaded but I receive a message TypeError: Choices is not a constructor... when I try to use it.

maybe it is something with webpack export. I am very curious about it

When I am setting a placeholder, my expectation is to see the placeholder on the select element and not on the search input when clicking the select box.

How can I set a placeholder for the users to see when there is no value selected?

My example plunker:
plunker

Thanks. ( By the way awesome plugin )

And trim() can throw an error if the array of choices have integers as values.

• https://github.com/jshjohnson/Choices/blob/master/assets/scripts/src/choices.js#L704
• https://github.com/jshjohnson/Choices/blob/master/assets/scripts/src/choices.js#L1014

Will be very appreciated if you publish this also as a bower module.

Hi,
First : awesome library !

I'm trying to make a angular 2 wrapper of your plugin and I think I've spotted some bugs, first of them, the config "items" seems to not work with a select-one element.

Here is a demo (#choices-1) : https://embed.plnkr.co/hVyjk5z2lJZorqOi48e6/
The list remain empty.

Maybe I don't use this variable correctly ?

(I've grouped all bugs on the same plunker, I'll do a different issue for other bug)

Thanks !

From the description in the readme, it seems like the callbackOnChange callback should be called when an item is added or removed via any sort of user-input. Currently removing an item only triggers it if an item is removed using the button, not if it is backspaced.
Seems like it should be called after line 817.

Hi,

I'd like to add a server-side filtering feature which would fetch data as the user inputs text (with a 'minChars' and a 'delay' properties).

Is that something that you plan to add in a future release ?

Thanks

Wanted to use this with remote data, Im prb just using it wrong
But what I wanted to repopulate the dropdown when trying into the search box
Nothing have to be changed without user selection a row
Thx

      this.Choices = new choises(this.element,{
      callbackOnChange : (value) => {
          //this triggers, ok
      },
      callbackOnSearch : (value)=>{
        //this triggers, but setvalue cant be used, it just adds all the time, and set input value to one of the rows
//tried setChoises to but nothing happend

      }
    });

Is it be possible to make a other request to fetch API in case no results found and to pass the entered value as argument and offer the response as new select data? If yes exist any example?

As is now it preloads the data and the user can select from this initial data fetch. In a case where many records exist, this is not the ideal solution.

Because this.input is hidden.

Dirty solution : yabab-dev@e8a5158

On the demo page if you tab through each input, the single select box without search does not close on blur.

Hey!
When trying to customize the classNames object during initialization and only impact a single value, it looks like Choices was blowing up a little and not working as expected until I pasted all the default values and customized one of them. Is the intended behavior to need to dupe all the defaults in this area? Thanks!

It would be really nice to have a feature to make dependent dropdowns. For example, let's imagine we have 2 dropdowns:

• Dropdown 1 is independent. Dropdown 2 depends on dropdown 1 value.
• Dropdown 1 is enabled by default while dropdown 2 is disabled until dropdown 1 has a selected value.
• An event is fired after a value has been selected in dropdown 1.
• The default behavior of the selected-value-event should be: if a non-null value has been selected in dropdown 1, then enable dropdown 2.
• An optional anonymous function should be passed to allow custom validations to enable or reject the enabling of the dropdown 2.

Just an idea, but I would really love a functionality like this since mostly all of the existing solutions require jQuery.

If a user is scrolling on a touch device, the touch start event shouldn't trigger. It should only trigger if it was a single tap.

There is a bug in the library that causes the first option in a select-multiple element to always be selected when the Choices object is initialised.

This is where it happens (line 1864 of src/choices.js)

// Join choices with preset choices and add them
allChoices
    .concat(this.presetChoices)
    .forEach((o, index) => {
        if (index === 0) {
            this._addChoice(true, o.disabled ? o.disabled : false, o.value, o.label);
        } else {
            this._addChoice(o.selected ? o.selected : false, o.disabled ? o.disabled : false, o.value, o.label);
        }
    });

The if (index === 0) { should be changed to take into account the select element type, like it does elsewhere in the script. i.e.

if (index === 0 && this.passedElement.type === 'select-one') {

Sorry I can't give you a patch but after wasting an hour or so unsuccessfully trying to get node.js and a long list of dependencies installed (webpack, eslint, opn, babel etc etc etc) so I can build a non-minified script that executes, I gave up and just edited the minified version instead. I'm not sure if "this" will work in the closure but the minified version inserts a named variable "e" pointing to "this" which does work.

It would be great if you could include a fully compiled, non-minified, source script in the distribution so that we can easily debug without having to mess around with node.js and/or reverse engineering the minified version. Thanks.

Trying a simple destroy() and then init() won't work...

http://codepen.io/dgt41/pen/amXoQL

I saw your post on /r/coolgithubprojects. I noticed on your demo page, using Chrome 52.0.2743.82, that selecting text doesn't work with the mouse. I can use the keyboard (shift + arrow keys), and Select All from the context menu, but the only mouse functionality available is focus. It won't even move the cursor around between characters.

I need to set and get selected element, like we do on select elements, only by send/return the values of selected choice(s).
(Like we do with jQuery : $('select').val(value);)

Today, if i use setValue() function, I need to pass an object like {value: 'one', label: 'Label One'} right ?
If so, i'have some issues with it : https://embed.plnkr.co/t48jwB4R7TunhXwcsr5z/

I've done an attempt to demonstrate clearly what i need : yabab-dev@5c8d91d

If you need a PR, ask me.

Thanks for you time !

(And sorry for spamming issues :p)

There is a way to get the value of the group?

    const example = new Choices(ele);

    example.setChoices([{
      label: 'Personal',
      choices: [
        {value: 'Child One', label: 'Child One'},
        {value: 'Child Two', label: 'Child Two'}
      ]
    },
      {
        label: 'Internet',
        choices: [
          {value: 'Child One', label: 'Child One'},
          {value: 'Child Two', label: 'Child Two'}
        ]
      }], 'value', 'label');
  }

So for example here when I click on item in the Personal group I need to know the group name.

Would be super cool if there was a callback for when a tag was clicked so that someone could then trigger the edited state.

Hi,
Using IE11 (with an addition of https://cdn.polyfill.io/v2/polyfill.min.js?features=default,matchMedia,fetch,Element.prototype.placeholder,Array.prototype.includes to hopefully grab everything I'd need to for compatibility since I was seeing fetch used) the UI isn't responding correctly; selections are not being added to the list of options; they just disappear. Are there any additional deps I should be using to solidify the browser support?

Maybe a bug only a select-one element, but when I use setValue() to set choices on my select they appear in the wrong orders .

Demo (#choices-2 and #choices-3) : https://embed.plnkr.co/hVyjk5z2lJZorqOi48e6/

Label Three appear in second position, and is selected by default :(

For instance:

.choices__group .choices__heading {

...when you can just use .choices__heading. I typically restyle Choices.js to fit the project I'm working on, and using less-specific CSS selectors would help a lot.

Hi!
I noticed you're currently using https://github.com/jshjohnson/Choices/blob/master/assets/scripts/src/lib/polyfills.js to handle polyfills for a few helper plugins. Wanted to get your thoughts around removing these and letting the end-user decide more on its implementation for compatibility. I wrote a little bit about the subject here which outlines using a tool like http://polyfill.io to handle these additions for you.

Would it be possible to have this plugin work with a disabled attribute so an <option> can be used as a placeholder? In a traditional <select> you could do the following to achieve this:

<select id="dropdown-save-to-project" class="form-control">
    <option disabled selected>Choose Project..</option>
    <option>Project #1 </option>
    <option>Project #2</option>
    <option>New Project</option>
</select>

When using choices, the <select> is shown empty until a non-disabled element is selected. I also tried using the built in placeholder/placeholderValue options but could not get it working with a single select input and didn't see any examples on the demo page.

(I also think this would degrade nicely if you opted to use a traditional <select> for mobile.)

Any chance you've used this inside another react+redux application? if so how? i've tried importing it and using it htat way but i get unexpected token inport errors?

Hey.

I want to ask if there is a simple way to replace multiple selects but working like default? The input and badges are not the most elegant way each time.

Here is an example how i want to have it:
https://silviomoreto.github.io/bootstrap-select/examples/#multiple-select-boxes

Maybe there is a way to do this.
Thanks and best regards

Not sure if this would be possible but it'd be SUPER cool if you exported a react component as well.

Me again for an enhancement ;)

callbackOnAddItem and callbackOnRemoveItem are called when choices are added to the select list.
I've made another callback which is called only on user inputs : yabab-dev@57c241a

Thanks !

Hi there,

Choices looks like what I've been looking around for so long! Thanks for making it.
There are multi-select dropdowns, is there a way to have those options within a multiselect to be checkboxes instead of the current DIVs under a tag? Thanks!

Is it possible to mix multi-select with the users ability to add custom items? Or alternatively, give the text field some predefined suggestions in the style of the multi-select?

I've tried setting the choices option when targeting a text field, but it doesn't seem to work.

...or leaving choices.js as the "main" entrypoint, instead of choices.min.js.

This lets others debug properly :)

You talk about a lightweight version but I think it's way to bloated for simple use cases (for example if you just want to use a single select input with search functionality).

Status quo:
chosen.min.js | 28kb
selectivity.min.js | 50kb
choices.min.js | 61kb
select2.min.js | 67kb

It would be nice if it is possible to build an own custom build or (better) you make it modular like selectivity.js.

First, thanks for 'choices' option

I made a function to do the same with ajax() but without callback.
Can you watch it ?

Here it is : yabab-dev@02a7144

Feel free to close if you don't want it ;)

Using a library such as syn to test events should be a thing!

It's more a enhancement than a bug.

Can we have a button to clear current selection on select-one element ?
Like chosen does : https://harvesthq.github.io/chosen/#allow-deselect-on-single-selects

Thanks !

Touchstart is preventing it it seems.

Hey!
Currently when instantiating Choices, you can impact the naming of the UI classes, but https://github.com/jshjohnson/Choices/blob/master/assets/styles/scss/choices.scss doesn't have a way to override these selectors if you'd like to keep the base styles (as far as I can see). Would you be up for a way to plug into these values? It'd look something like this:

$choices-selector: 'choices' !default;

.#{$choices-selector} {
  color: blue;
}

It's something I could look into if you're interested.

Contrary to what the hint text says, pressing Enter actually submits the form that the input is in.

Thanks for choices.js!

Pretty self-explanatory, but it probably makes sense to use --save over --save-dev when installing a component like this.