This adds basic tests to ensure that the selection is accessible by
all users. This checks for common attributes, ensuring that the
container is always keyboard accessible and follows ARIA guidelines.
This also changes the base selection to create a common element so
we don't need to repeat attributes and such across multiple selection
containers.
This adds backwards compatibility with the `query` option so it
automatically patches the `DataAdapter.query` function. The only
major difference between the methods is the call signature, which
has now moved the callback out of the parameters and into the second
argument.
This also adds tests that verify that the old query functions should
work as expected.
Now if the old `initSelection` method is used, a warning will be
triggered in the console informing the user that it has now been
changed to `DataAdapter.current`, and they should create a custom
data adapter instead. We will still only call `initSelection` once,
and then default back to the old data adapter for calls after that.
This allows for mostly transparent support between versions.
This adds tests to ensure that `initSelection` operates the same as
it previously did, but now patches the `current` method of the
default data adapter.
This adds detailed docs explaining how you can convert the old
implementations of `query` and `initSelection` into a custom data
adapter using the `current` and `query` methods provided there.
Examples are included that should make it considerably easier to
handle.
This adds the `select` and `unselect` events so users can still
hook into them from their jQuery plugins.
This also modifies the core `trigger` to fire pre-events that can
be canceled for the `open`, `close`, `select`, and `unselect`
events. Users implementing these events who need to handle cases
where the event has been prevented should check `args.prevented`,
where `args` is the object that was included for arguments when
triggering the internal event.
This should allow those using their own build systems to
automatically load in translations. In the future, the `amdBase`
option may be used to optionally load some components of Select2.
As Select2 cannot know what the base directory is, it currently
has to load in all of the optional components in the default build.
By allowing users to set their own base, it will allow us to know
the base to load files from, which makes it easier to use the
`require` function to optionally load them.
This fixes https://github.com/select2/select2/issues/2899.
`selectOnClose` is a new option which works very much like the old
`selectOnBlur` option. When the `close` event is triggered, the
highlighted result is automatically selected. This is useful for
single selects, which is where it is designed to be used, but it
can also be used on multiple selects.
This also adds tests to verify that this works in the future.
During the creation of the test, we noticed that we were missing a
mock container that could be used for triggering events. One was
created and a general mock JS file was created to hold any future
mocks for tests.
In past versions of Select2, the `width` option could be used to
tell Select2 how to determine the width of the container generated
by Select2.
**Breaking change:** The default value for the `width` option has
been changed from `copy` to `resolve.`
**Breaking change:** The old option called `copy` has been renamed
to `style` to better reflect what the width is generated from.
This fixes https://github.com/select2/select2/pull/2090.
This fixes https://github.com/select2/select2/issues/2911.
While deep nesting will not work on a standard `<select>`, we can
emulate it through data objects still, and just handle the display
of the data in the results.
This also means that the horrific deep-nested CSS is back to handle
the padding. I hope that will get fixed over time.
This also fixes one of the performance issues with adding array
data, as options are added at the very end instead of one by one.
Due to a change in 7edf0e3ebe that
made the rendered selection take up the full width of the selection
container, the placeholder was not being automatically displayed.
The calculations were always turning out negative, which has been
fixed by not trying to automatically calculate the best possible
width.
Because of the change made previously to make events global, any
time a result message was triggered there would be a stack overflow.
This was because we were re-triggering the event locally if it
happened on a global level, which would start the loop.
This has been fixed so the event is never caught locally, but
instead uses the global handler.
The `AllowClear` decorator appears to work fine with multiple
selects, so we've chosen to remove remove it. This adds some
styling and fixes the check so it all works as expected.
This closes https://github.com/select2/select2/issues/2903.
This fixes an issue where the `x` in multiple selects (visible next
to the option) would be visible even if the container was disabled.
Because it was still accepting events as well, this would cause the
underlying data to be changed, even though it was disabled. We now
hide the icon using CSS so this issue doesn't occur.
The same applies to the `x` for clearing a placeholder.
https://github.com/select2/select2/issues/2903
Also pull the logic for automatically closing the dropdown into the
dropdown adapter, taking it out of the core.
The `selected` and `unselected` events are now `select` and
`unselect`, which is what many of the other adapters were expecting
them to be.
Some tests for placeholders have been added.
Now Select2 can fire jQuery events that will match the corresponding
internal events. The `open` and `close` events are now publicly
accessible.
The selection adapter was chosen because it is the least likely to
be moved, but handles the most common events. This `EventRelay`
decorator should theoretically be able to decorate any of the
adapters, as they all have the `bind` method that it needs.
The star event will allow us to relay any custom events as well as
the ones used internally by Select2. This also makes it much
easier to start triggering events in general, as we don't need to
relay it in the core anymore.
A module has been created for the jQuery-facing events, and the
release announcement has been updated to mention the event name
changes.
This also adds some documentation about the public events.
For the dropdown search on single select instances, the search
focus should happen in a `setTimeout` call. This is because many
browsers trigger the element focus on `click`, so our original call
to `$search.focus` will essentially be ignored. By also focusing
it in a timeout, this will delay the call to `focus` so the browser
will no longer take it back.
We do not have this issue for multiple select instances, as they
trigger the `open` event on `click`, instead of using `mousedown`.
This fixes https://github.com/select2/select2/issues/2900.
There was a plan to universally use an array as the return from
query methods, but now that we've realized pagination and extra
things are impossible without it, we're going back to the return
object. Anyone looking to migrate their data should be returning
an object with the key `results` containing what they previously
returned.
This should fix https://github.com/select2/select2/issues/2898
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.
