In the stable version this line looks like:
dropLeft = offset.left + width - dropWidth;
In line (1193) the variable width is set to dropWidth which means we are always going to end up with
dropLeft = offset.left + X - X
or
dropLeft = offset.left
Which means we are still aligned to the left of the button.
This current solution from @ef9f1dea is just aligning the select2-drop closer to the center which is not what it did before the dropdownAutoWidth.
The line I submitted worked perfect and my dropdown now aligns to the RHS of the button again as expected.
The original title is copied if defined and it's sufficient for accessibility purpose.
We shouldn't force the title attribute, it's especially annoying if people are using
tooltip implementation based on the title attribute such as Bootstrap tooltip.
Prevents "Uncaught TypeError: Object #<Object> has no method 'abort'"
error for case when non-jQuery promise is used as a handler (AngularJS
$promise for example).
- collision detection was not moving the drop left based on the
difference between viewport and relative location of box (dropleft +
dropwidth)
- .select2-drop-active was overriding the .select2-drop-auto-width
making the shifted dropbox look a bit wierd
The goal here is send off a triggered event to a subscriber that an
element is going to be removed. It hasn't removed yet but would be
after the event fires. I have also added logic to determine if a
subscriber has prevented default. This will prove useful in the future
if a subscriber needs to extend the functionality for other usages.
The function will now pass all properties of the objects passed as tags to the constructor, not just the "id" and "text" properties. Because a tag is not always just an id and a text, just like when you provide the items with the "data" object instead.
This makes sure these properties are always available at the runtime of formatSelection() or formatResult(), which is not currently the case when the field is repopulated on a triggered "change" event.
My code looks like this :
$el.select2({
...,
tags: [{
//id
id: 1,
//the string that will matched against the user's query
text: 'martin smith greatmartin@provider.com'
//the label of the item that will be shown if this tag is selected
label: 'M. Smith',
}],
formatSelection: function(object, container){
return object.label || object.text;
},
//right now I have to override the default function:
initSelection: function(){...}
});
