This fixes the SASS error caused by the `&[dir="rtl"]` selector in
the `_single.scss` and `_multiple.scss` files. We were expecting
these files to be nested within the `.select-container` class, which
would have made this a non-error as the `&` would refer to the
`.select2-container` class that was wrapping the `@import`.
This moves the `@import` statements into the `.select2-container`
class, so this no longer triggers an error in the Ruby version of
SASS.
This closes https://github.com/select2/select2/issues/2896
jQuery.mousewheel will allow us to prevent the dropdown from
automatically closing when the user scrolls to the end of the list.
It is automatically bundled in the full versions of Select2 and
we don't require that it is included in order for Select2 to work.
jQuery.mousewheel was taken directly from the source repository
using the commit at
cc2c5d73ae
I'm still not quite sure how this should be handled for the general
case, but for the special case we have this for infinite scrolling,
only on AJAX data.
This will always clone the options that are passed in when
initializing Select2 on multiple objects (like `$("select")`) so
it doesn't always assume that the configuration is the exact same.
This prevents any reference-based tricks for modifying the data
within Select2, but some would look at that as an upside.
The documentation for templates still needs to be created.
A warning is now generated in the console for applications using
the previous data attributes that have been migrated.
Now that the data objects have the `element` property, we can test
to make sure it's a DOM element and then use it for selecting the
option. This allows us to select multiple options with the same id,
as well as handle cases where that is already happening.
You cannot use `$e.val()` to select two options with the same id,
as jQuery will reject it, but you can set the second option to
`.selected = true`, which is supported.
alt-down/up is the standard way of opening a select when using a
screen reader. This also fixes the gradient in IE, so now it
displays the right colors. Also added a note about Placeholders.js,
so the placeholders on multi-select boxes will work in IE 9 and
below.
Added a disabled state for Select2. This will correctly listen to
property changes (so when the disabled property is changed) and
update the state of Select2 to reflect it.
Added a utility function to find a method to a different context.
With the recent changes to how Select2 works internally, this really
isn't needed. This has been added to make the migration path
easier, and it just internally calls `val` on the underlying select
element. The only difference is that the `val` function will now
convert any non-string elements to strings.
The second argument (`triggerChange`) has not been migrated, as
Select2 now internally relies on the `change` event.
**Note:** As the old `initSelection` method has not been migrated,
it is not possible to set the `val` on remote data sources where
the value has not previously been selected.
The backspace key now behaves very similar to how it does in other
multiple select boxes, such as the one that Stack Exchange uses.
When the user presses the backspace key, the last selected option
is unselected and the search box is filled with the text of the
option.
`dropdownParent` controls the location of the dropdown when it is
automatically added to the DOM. By default, this is the body
element but it can be modified based on where the user needs it.
In past versions of Select2, a mask was used to detect clicks
outside of the dropdown. While this works with high accuracy, and
avoid many of the click issues we had with modals, it is no longer
the default close handler for Select2. It blocks any features on
the container from working without a second click, and introduces
odd edge cases that we cannot easily handle.
Up until now, the container could only have a dropdown that was
displayed below the container. While this worked well, there are
some cases where the dropdown should be displayed above the
container. Most notably, this is when the conatainer is displayed
towards the bottom of the page, and displaying the dropdown would
cause the page to be extended. Because we close the dropdown
when the page is scrolled, the user would not be able to access any
options that were displayed outside of the viewpoint.
Because of the order that events are fired, we attach the handlers
for repositioning the dropdown after results are displayed when the
container is opened for the first time. This allows it to be
registered after the results container registers their events, so
the dropdown is repositioned after the results have been displayed.
The logic for determining the direction that the dropdown will be
shown in is very similar to the positioning code used in
Select2 3.x. Unlike previous versions of Select2, a class is used
to indicate the direction of the dropdown, even if it is displaying
below the container.
The themes provided with Select2 have been updated to correctly
render the dropdown in both directions.
This now matches how the browser works, where the dropdown is
closed when the window scrolls.
The arrow was also covering the clear placeholder icon, this has
now been fixed and the clear icon is now placed correctly.
When the dropdown is in the dropdown that is attached to the body,
the call to `show` causes `display: inline` to be set directly on
the search container. This causes rendering issues, so this change
uses a class instead of calling `show` and `hide` directly.
This is most likely a jQuery bug of some form, as it only happens
when using the dropdown that is attached to the body.
