`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.
In Select2 3.x, the dropdown is attached to the body element and
it is floated above all other elements.
In Select2 4.x, the dropdown is attached directly to the Select2
container, which allows us to skip any special placing logic. This
happens to be how Chosen currently does it, and it prevents us
from having the dropdown display up, as well as a few other strange
issues that can't be prevented.
This new module will most likely become the default, as it matches
the functionality of Select2 3.x and has quite a few advantages.
The other positioning code will need to be broken out into a
separate module in the future.
The main container should not need to position the individual
components. This makes it easier for components to override where
they should be placed, such as adding the dropdown outside of the
container.
When destroying Select2, an error could be raised while destroying
the selection container. This was because the destroy handler was
relying on the container id being present.
The old functionality has been restored where Select2 will destroy
itself when it is initialized again.
