When all the select options are removed from mutli-select, it displays data-placeholder value, which is fine, but clicking select box for first time, it does not pull the drop down. On second click the multi-select works fine.
This problem happens in all browsers. I also have found the same problem in demos showed in below link.
Is there any fix for this issue?
http://harvesthq.github.com/chosen/
It might just be the functionality of it. After clearing out the option, they may want you to double click on it to clear out the text.
However if you want to report the bug I would suggest doing it on their github page.
https://github.com/harvesthq/chosen/issues
Related
Here, I'm using this npm package https://www.npmjs.com/package/react-multi-select-component
If anyone needs codepen https://codesandbox.io/s/10xn41w767
I'm trying to implement these without using document.getElementById(), Any idea!!
So I sharing my codepen link where I added a button so that when we click the button it just removes every item that we selected in the dropdown box.
Hope it clarifies my problems.
https://codesandbox.io/s/multiselect-react-dropdown-forked-w28re?file=/src/index.js
I'm using selectric - plugin for replacing select in forms and I'm struggling with the add search option, sadly this plugin does not come with such a feature.
I got to the point where I can create an input over label and refresh options after typing something, but it does not work as I expect. I got to this point:
jsfiddle http://jsfiddle.net/fcamjb57/
The issue is as you click the input, the whole select closes.
I'm using this following tool to make the dropdown searchable and look nice.
Harvesthq Chosen
First I'm loading the data dynamically in dropdown and applying this code to apply the effect.
$(".chosen-select").chosen();
It works just fine. Everything ok. Then depending on some option I want to empty all data and insert new options. Now problems occur. The newly added options are not shown. Old options are still visible.
So I checked with the firebug. Select tag contains my desired data, but it's showing wrong data(Old ones).Some kind of div is visible. I tried to apply the chosen methd once again. But not working. Then I tried
$("#form_field").trigger("chosen:updated");
And not working either. Can anybody tell me what is missing?
I want to clear and load data dynamically multiple times in dropdown and apply the chosen effect.
This worked for me
$("#form_field").trigger("liszt:updated");
In this example: http://jsfiddle.net/5WrcD/2/ I have two Ember.Selects with selection bound to a single controller. Using Firefox (I'm running version 15.0 Mac), when I change the value of the first select, the second select does not change. If I then proceed to change the value of the second select to match the first, all subsequent changes to either select will be propagated to the other. Using Chrome/Safari the selects stay synchronized from the beginning.
Could this possible be a bug in Ember or Firefox? Am I wrong to expect the selects to stay synchronized?
This is probably not a bug with Ember, but an issue with Firefox I guess.
If you check with a DOM inspector(Firebug) in Firefox you can see that the correct options are getting selected, the two select menus are changing synchronously. Its just that its not being shown in display until we change a couple of times.
So Ember is anyway successful in setting selected="selected" on the correct option , Firefox is having problems showing the correct item in ui.
I created another ticket here for the issue:
HTML select, correct option selected in DOM, but wrong item shown in firefox
Update
After discussions on the other Question, it is found that setting content:'' will fix the issue in firefox. So if you dont want any default selection you are good to go without this.
Eg : http://jsfiddle.net/5WrcD/3/show/
Credits : vol7ron
I'm testing TagDragon jQuery plugin, it's exactly what I need, but is has one annoying "feature", when I click the scrollbar in the suggestion list, it hides it's results. On the other hand jQuery autocomplete plugin doesn't lose the focus on the input field and that's why it doesn't hide its results. But that plugin doesn't provide the functionality I need, so I can't just replace tagdragon.
I've studied jQuery autocomplete code and I can't understand how they keep the focus on the input field, I just can't find the code responsible for that!
So the question of the day is: How to keep the focus on the input when using the scrollbar in the result suggest list?
P.S. Also I have a question of how jQuery autocomplete plugin does it, because it looks like magic to me after studding the code for an hour.
I just asked a similar question, and nobody answered it, so I basically tweaked my own code until I figured out a working solution.
After investigating some of the other pickers out there, I realized that the trick is not to add an event that closes the list on blur, instead simulate a blur event by checking other possibilities by doing the following:
upon the opening of the list, add a click event to the document that
checks to see if the click is not on in the active input, and not on
the active list. If this is true and the click is in fact on a non-listy
part of the document, then close it.
add an event to each list item in the suggest list (when the list is
open only) that selects the value and closes the list.
add an keydown event to the input itself so if the user hits enter,
it changes the value and closes the list.