We Keep Coding

jQuery Select2 plugin dropdown not responding to mouse clicks

I'n using the select2 jQuery plugin with an ajax call to retrieve items for the dropdown list as the user types. Multiple selections (tags) are allowed and custom selections are allowed. When the dropdown list appears, if I use the cursor keys to go to the item I want and hit enter or tab, then the everything works fine. The select2-selecting callback is triggered and the input gets updated with the selection text.
If I click on an option with the mouse, however, the select2-selecting callback is not triggered and the input is not updated. The only thing that happens is that the dropdown menu disappears, nothing else.
I have another select2 input on the same page that allows only one selection and no custom selections. Clicking dropdown items in that works fine. Example on the plugin site similar to what I'm doing respond to clicks too, so it's not a general bug with the plugin.
I am aware that select2 actually has a hidden, completely translucent container div the size of the screen that is added to the DOM whenever a select2 input has focus. The select2 input sits on top of this 'underlay' and everything else is underneath it. When the select2 input looses focus, the 'underlay' disappears. I thought that the problem might be that the underlay had a higher z-index than the input, so when I click a dropdown item I'm actually just clicking the underlay and causing the input to loose focus. Well, the input (9999) does have a higher z-index than the underlay (9998). I just wanted to rule that out.

This bit of javascript was the culprit:
input.on("select2-blur", function() {
$(this).select2('close');
});
I think that at one stage the dropdown menu was only disappearing if I tabbed out of the input, but if I clicked outside of the input when the dropdown was visible, it stayed there. I had this is as a means to get rid of the dropdown when the input lost focus. It was the cause of the problem though. Strangely, even though I've removed it now, the dropdown disappears appropriately when I click outside the input, but I don't know why that is.

Is there a way to keep multiple select boxes open at the same time?

I have 2 Select Box in my HTML page.
For some reason, I wish to want both the text boxes open at the same time.
This may be for several purposes, like taking screenshots of the both open at the same time.
The problem I face is, when I click on one selectbox, another goes away, when I click on the other, previous goes away.
Is it possible to keep both the selectboxes open at the same time?
I am fine if it requires javascript to do so.
Here are the two boxes, which I wish to keep open, is it possible to block some events or anything?
Thanks

#xiankai: Yes I have considered using a list view already, and then later instructing that this would/could be a combo-box. Here's my work with this modification.

If your select box doesn't have many elements, have you considering using a listbox view instead? Simply add multiple to the your <select> element. Additionally, you can specify the height of the select box with the size attribute.

How to scroll an HTML select box to an option without directly selecting that option?

My issue is that when the page is refreshed, I want the 'select' to be scrolled all the way to the top. However, if the user has scrolled the select box down to view the options (without necessarily even clicking on any of them) prior to the refresh, the 'select' box doesn't return to the top.
I've seen answers where people say to simply use selectedIndex to select the first option in the list, and thus it will automatically scroll to the top, but this is NOT an option. When the page is refreshed, nothing must be selected and thus, the only code I have at the moment is:
document.form1.componentselect.selectedIndex = -1;
Which is effective at clearing out any selections in the 'componentselect', but does not reset the scroll position.
FYI, I am using straight HTML and JS, no JQuery or anything like that. Thanks.

All you need to do is first select the top item (as you said you don't want to do), but then set it to -1!
document.form1.foo.selectedIndex=0;
document.form1.foo.selectedIndex=-1;
While I was looking at this, I also figured out how to have it remember what was selected, in case that becomes an issue:
http://jsfiddle.net/ryleyb/qPJ4S/

I think it's impossible to change the scroll position in traditional selects (select from the tag, no box generated by javascript plugins) because this box is controlled directly by the user's browser and theme, without direct interference by javascript.
I believe the only way to "reset" the display is to force the user to click on the field again, hiding and redisplaying the select tag. But you will need to click to open the box again and it hinders more than helps the user.

Losing selection when clicking checkbox label

I am trying to get a checkbox with a label to function so that when you have text selected in a contenteditable div, clicking on the label will not lose the selection from the div. The label still needs to apply the standard checkbox tick/untick upon clicking it, but keep the focus & selection intack on the div.
Doing a simple focus() on the div won't help as the selection will be gone (and caret is at the beginning). I could of course look into a way for storing the selection object and trying to assign it back after the label click, but isn't there any simpler way of keeping the selection?
(the reason I need to do this with label & checkbox is because I will be using jQuery UI buttons and I will need the the toggle functionality of them)
On a similar note, if you click the checkbox, you usually still keep the selection in the div, but at least on FF4, if you press the checkbox very frequently (<1s), it will lose the selection. Any idea what's going on there? answered below
example: http://jsfiddle.net/niklasvh/gULM9/

It's a Firefox bug marked 490367.
According to the bug description, double-click functionality on input fields will act unusually when there is a contenteditable div on the page.
I noticed the strange behavior while trying to replicate it manually so I guessed it was a bug. I don't know of any workarounds.

How to make input not to lose focus when clicking on scrollbar in suggestion list

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.