This fixes an issue where most keys would not trigger the search
in Firefox for Android. There were only a few keys which would
trigger `keyup`, such as space and enter (the search icon), but
they were not consistent. We know that they were being triggered
though, as you could type "new " (note the space) and it would
trigger a search, giving us all states that started with "new".
The problem is that Firefox for Android does not consistently
trigger `keyup` and `keydown` events when a keyboard is used. To
work around the issue, we are now using the `input` event in
replacement of the `keyup` event, which was used to trigger the
search. While this is not an actual `KeyboardEvent` in Chrome, and
lacks some of the important metadata such as `which`/`key` in
Firefox, it works for our implementation.
As the `input` event is not supported in older browsers, such as
those before Internet Explorer 9, we have to listen for both the
old `keyup` event and the new `input` event. As the `input` event
is always triggered before the `keyup` event, we unbind the `keyup`
event automatically to prevent searches from being triggered twice.
This solution was discovered in a blog post by Mathias Bynens at
https://mathiasbynens.be/notes/oninput.
**Note:** The ability to backspace in a blank text field on multiple
selects in order to remove the last selected item does not work in
Firefox for Android because the `keydown` event does not trigger
when the text field is empty. Users can still use the "x" icon
provided at the start of every selected option to achieve the same
effect.
This closes https://github.com/select2/select2/issues/2997.
This also fixes a possible issue where the `< 0` fallback would
not be used because the `minimumResultsForSearch` check would
always return false and never load in the module.
This closes https://github.com/select2/select2/pull/3077.
This fixes the fallback path for the `data-ajax-url` attribute on
elements. As this attribute was previously supported in Select2,
the attribute has been migrated to the new, nested format of the
url and triggers a deprecation warning when it is used. Because
of a fix to the `data-*` attribute parsing made in a9f6d64 that
allowed for nested attributes to be parsed correctly in modern
browsers under jQuery 1.x, the deprecation warning would be
triggered but the attribute would no longer actually be used.
This also fixes some of the `.data` calls to use the camel cased
version of the key instead of the dashed version, which is the
preferred key and will be enforced in future versions of jQuery
as the only way to access data attributes.
Now in situations where the `dataset` attribute is used by Select2,
it combines the results of both `$e.data()` and `e.dataset` when
generating the object containing all of the options. This will
the `dataset` fix to still be used, while also still relying on
jQuery to do additional parsing on any options that it can.
The `dataset` fix is now only used on jQuery 1.x, as that is the
only version of jQuery affected by the dash issue. This is done
using version number parsing on the `$.fn.jquery` property that is
defined by jQuery. As this property is not defined in Zepto and
many other jQuery compatible checks, we only include the fallback
if the property is available. This assumes that any jQuery
compatible libraries that are in use will not include the same dash
issue, which we believe is a safe assumption given that it did not
match the HTML `dataset` specification.
This also adds a few tests to ensure that the deprecated attributes
still continue to function.
This closes https://github.com/select2/select2/issues/3086.
This adds basic documentation explaining that there are compatibility
decorators for `<input type="text" />` support. This is not fully
compatible with all features and requires the use of an external
adapter like the `ArrayAdapter` or `AjaxAdapter` to provide a
reasonable way to query results.
This also triggers a warning if the adapter is used with a hidden
input, as the degraded functionality when there is no JavaScript
support should be discouraged.
This adds backwards compatibility back into Select2 for `<input />`
tags. The compatibility modules are only available in the full
version and will trigger a warning if a hidden input is being used.
With the new decorator, Select2 should support the basic operations
that it previously did, with the exception of completely overriding
the internal objects. As we no longer expose `data` as a writable
method, it is no longer possible to completely override the selected
data. The state is still managed internally, but in order to prevent
data corruption issues in the past, it is not exposed to the public.
Some small changes needed to be made to how Select2 was dynamically
generating new `<option>` tags, so now a method is called that can
be overridden. In the case of the new decorator, this method is
intercepted and handled without having to actually place the
`<option>` tags into the DOM.
The decorator is applied after all of the other defaults, as the
defaults are not given the current element.
There has only been limited testing with this decorator, primarily
using the `data` and `placeholder` options.
This closes https://github.com/select2/select2/issues/3022.
As we have established already, jQuery 1.x does not correctly handle
`data-*` attributes where there are multiple dashes. This makes it
so we can still handle nested options when working with jQuery 1.x
by using the `.dataset` option that is supported by all major
browsers as well as IE 11+.
Browser support tables for the `.dataset` attributes can be found at
http://caniuse.com/dataset
A notice was already added to the documentation about this in
caeb0ec9b7.
The related ticket in the jQuery repository about this issue is
https://github.com/jquery/jquery/issues/2070.
This closes https://github.com/select2/select2/issues/2969.
Now the focus of the selection container is correctly monitored so
there is a consistent 1px black border on the default theme whenever
it is focused. This requires `focusin`/`focusout` support, which is
supported by all major browsers except for Firefox. In Firefox, the
old focus appearance is still consistent and has not been broken
by this update.
The key handling has also been improved such that some of the logic
detection that was previously done within the search handlers for
multiple select searches is now pushed back to the base selection.
This closes https://github.com/select2/select2/issues/2995.
Previously Select2 would assume that the tab index for the
`<select>` was `0`, which is the browser default. Now Select2 will
clone the tab index from the original element, and correctly restore
it when it is destroyed or disabled/enabled.
This closes https://github.com/select2/select2/issues/3031.
There were a few undefined variables being referenced within the
Select2 code. The JSHint configuration has been modified to fail
if there are undefined variables being referenced, including any
global variables.
There is an exception that is being made for the jQuery shim, as it
must try to find the global jQuery references.
An exception is made for the test helpers, as the SauceLabs reporting
variables are not camelCase, and would normally trigger warnings.
This closes https://github.com/select2/select2/pull/3028.
This copies the `title` attribute of `<option>` and `<optgroup>`
tags to the `title` attribute of the options within the results
list and the selection when it is rendered.
For single selections, the `text` property on the data objects will
be used if the `title` attribute is not present, which will allow
for long names to still be viewable if they overflow the selection
container.
This also fixes a potential issue in browsers that did not support
the non-standard `innerText` property on DOM nodes. As the
`textContent` property is the standard, and it is supported on
IE 9+, we try to set that before falling back to `innerText`.
This closes https://github.com/select2/select2/issues/2530.
This closes https://github.com/select2/select2/pull/2889.
In the past, `select2("data")` allowed you to retrieve the currently
selected data objects. Read-only support has been added back for
this, which maps to the `current` method of the data adapter. This
will only work for data adapters which allow for the synchronous
retrieval of the current data, which is the case for all of the
default data adapters.
You could also previously overwrite the currently selected data
objects by passing in an argument to `select2("data")`. As this
dealt directly with the internals, and required a considerable
amount of work to synchronize it, it has been removed. A warning
will now be triggered if the method is called with additional
elements, and the `val` method should be used instead.
This closes https://github.com/select2/select2/issues/2938.
This adds `StopPropagation` modules that will stop the propagation
of the most common events from the selection and dropdown containers.
These modules work from a list of 21 common events, most of which
were stopped by default in past versions, and call `stopPropagation`
on them when they are detected at the container level.
These modules are only available in full builds of Select2.
This closes https://github.com/select2/select2/issues/2033.
This closes https://github.com/select2/select2/issues/2974.
This adds documentation for the `templateResult` and
`templateSelection` options. The fact that placeholders and
custom messages are templated was noted, although most people
should be using the standard `text` property that they provide
anyway. This fixes the templating link provided in the release
announcement to link to the correct location in the documentation.
This also adds support for the `templateSelection` function to
return a DocumentFragment or jQuery compatible object to be
passed back and rendered.
This closes https://github.com/select2/select2/issues/3005.
This closes https://github.com/select2/select2/issues/3019.
The `closeOnSelect` option was previously used to control whether
or not the dropdown was closed when an option was selected. This
could be simulated by triggering the `open` event after the `close`
event was received, but it makes sense to abstract it out into a
decorator.
This also adds support for not closing the dropdown when the control
key is being held. This is useful when multiple options need to be
selected in quick succession, so the dropdown does not have to be
reopened.
This also adds documentation that covers both changes.
This closes https://github.com/select2/select2/pull/2735.
This closes https://github.com/select2/select2/issues/3017.
This also fixes the case where `templateResult` does not return a
string, where it will fall back to jQuery to set the value of the
option. This allows for the `templateResult` function to return a
jQuery or DOM element that contains the templated data.
Just like with the translation methods, only strings returned from
`templateResult` will be escaped.
The old flag icons have been transferred from the old repository to
the documentation, for use in the templates. Unfortunately I cannot
find a license for them, but I suspect a license isn't actually
needed considering the state flags are public.
This closes https://github.com/select2/select2/issues/3005.
This closes https://github.com/select2/select2/issues/818.
In a single select, the search field is automatically focused when
the select is opened. This also applied to multiple selects, but
this was causing issues because the container was automatically
focused when the dropdown was closed.
This makes a change such that the search field is automatically
focused when the dropdown is closed.
This closes https://github.com/select2/select2/issues/2995.
The search box previously displayed a clear icon on the far right
side in webkit-based browsers, specifically Chrome and Safari. This
hides the clear icon in those browsers, and also fixes a slight
sizing issue, so it should no longer be displayed.
This also disables autocorrect, autocompleted, as well as a few
other automatic search corrections on the field, so mobile devices
should have a better experience.
This closes https://github.com/select2/select2/issues/3018.
In past versions of Select2, supplying a value less than zero to
`minimumResultsForSearch` acted the same as providing a high value,
such as `Infinity`. This corrects the regression by mapping anything
less than zero to the value `Infinity`.
This closes https://github.com/select2/select2/issues/2994.
It is assumed that DOM elements or related objects will have been
escaped before they are passed back from templating functions. As
strings are typically blinding concatenated, like in our defaults,
it makes sense to escape the markup within them.
This is related to https://github.com/select2/select2/issues/3005.
Translations will now be passed through `escapeMarkup` and injected
into the results messages as HTML just like the templating options
for the the results and selections. This fixes the regression from
3.x where the old formatters always supported HTML.
This closes https://github.com/select2/select2/issues/3008.
The `allowClear` option may not work as intended if a placeholder
is not used. This is becaise the placeholder holds the value that
the `<select>` should be reset to when the `x` is hit.
An error is now properly raised in the console when Select2 detects
that the `allowClear` option is used without the `placeholder`
option.
This closes https://github.com/select2/select2/issues/3016.
This adds back the `ajax.transport` option, which allows anyone to
use their own AJAX backend. By default, `jQuery.ajax` is used as the
default transport backend.
**Breaking change:** Instead of taking `params` that contains a
`success` and `error` keys for the callback, two new callback
parameters are passed alongside of `params` that should be called
when the request succeeds or fails.
This closes https://github.com/select2/select2/issues/2987.
This is needed to escape any bad markup that is passed through
user-entered data. Users can prevent their markup from being
escaped by using a no-op `escapeMarkup` function.
This closes https://github.com/select2/select2/issues/2990.
Now we are using `jQuery.noConflict()` in tests, so it should be
slightly easier to detect when this happens next time. Tests just
need to be written for the component.
This closes https://github.com/select2/select2/issues/2985.
This prevents scrolling within scrollable containers (excluding the
dropdown) when the dropdown is open. This fixes an issue where the
dropdown would go out of sync with the parent container when the
parent container was scrolled.
We did not have this issue in past versions of Select2 because the
mask prevented any scrolling. Now that we have removed the mask, we
have to deal with scrolling from different areas of the page.
We initially tried to hook into the `scroll` events of the parent
containers, but because of a list of issues we decided against it.
If the container scrolled out of view, the dropdown would still be
left open and above everything else, even though the container
wasn't visually connected to it.
The `scroll` event does not bubble, so we need to attach the `scroll`
handler to every parent element that is scrollable. Since it is
surprisingly difficult to determine if an element is scrollable,
we modified some CC-BY-SA code and use that to determine if the
element has a scrollbar. The original `hasScroll` function can be
found at http://codereview.stackexchange.com/q/13338, the same link
left within the code, and was originally designed to be a sizzle
selector. As Select2 does not require a sizzle-compatible version of
jQuery, we converted it into a function that could be used with
`.filter` to filter down the elements.
This closes https://github.com/select2/select2/issues/2975.
When we re-implemented support for responsive widths, through the
use of percentages, we never moved the support over to the dropdowns.
So the dropdowns generally were not large enough, and when resized
they never re-adjusted, and they didn't fully work as intended.
This fixes the issue by automatically resizing the dropdown whenever
it is repositioned, mainly to handle new scrollbars, which will
ensure that it is always the same width as the container.
This also adds a section to the examples for responsive design,
just like in the old documentation.
This closes https://github.com/select2/select2/issues/2949.
This reverts the changes (from 3.5.x) to the scroll detection, so
Select2 will still reposition itself every time the window is
scrolled or resized. This has the benefit of fixing the issue when
the screen jumps if the dropdown is too high, which would previously
close the dropdown.
Select2 will also correctly set the positioning if it is pushed out
of the top of the viewport. Due to an unexpected bug, Select2 would
previously still display above the container, but would be styled
as if it were below it.
This closes https://github.com/select2/select2/issues/2961.
This closes https://github.com/select2/select2/issues/2956.
This fixes an issue where an `unselect` event would be incorrectly
triggered when the selected option was selected again in a single
select. This has been fixed now, so the even will only be triggered
for multiple selects. The `close` event will still be triggered
though, so the functionality will still remain the same to the user.
This closes https://github.com/select2/select2/issues/2959.
The `selectOnClose` option did not work in production because we
were decorating the `dropdownAdapter` instead of the `resultsAdpater`
when automatically generating the adapters. This has now been fixed,
and the option should work without errors in production.
This also adds documentation for the `selectOnClose` option.
This closes https://github.com/select2/select2/issues/2953.
This adds a check that triggers an error if Select2 was not able
to detect a copy of jQuery on the page. This should help users when
they are setting up Select2.
**Breaking change:** The full build no longer includes jQuery.
Previously, the full build included all requirements for Select2,
including jQuery, which meant that anyone looking for the optional
requirements had to possibly include multiple versions of jQuery
on their page. This means that anyone requiring Select2 to also
bundle jQuery will now need to include jQuery on their pages
alongside Select2. A copy of jQuery is included in the repository.
**Breaking change:** The AMD build of Select2 will now correctly
wrap the code in a `define` block. It will still create the named
blocks inside of the code, which should be valid in most AMD build
systems, so now Select2 is compatible with cases where the file
does not have the same name as the Select2 module name.
**Breaking change:** Select2 will re-use the AMD methods if they
are available on the page, but it will not longer leak the included
AMD loader to the global scope. The AMD methods will still be
available on the `jQuery.fn.select2.amd` namespace.
The `mock.js` test file has been renamed to `helpers.js` and will
handle the escalation of the `require` and `define` variables to
the global scope. It should be included in all test files, or the
tests will fail.
This closes https://github.com/select2/select2/issues/2946.
When `jQuery.noConflict` is called, the global `$` variable is not
defined. We cannot assume in the code that the variable is defined,
and instead should always make sure to import the `jquery` module
when we need jQuery.
This fixes all of the issues where we are assuming that `$` is
defined globally when we are not importing the module. This also
fixes the issues when defining the `jQuery.fn.select2.amd` modules
where we were always attaching to the `$` object instead of the
`jQuery` object.
This closes https://github.com/select2/select2/issues/2947.
In the past, Select2 triggered the `select2-clearing` event when
clearing the placeholder. This has been switched to the `unselect`
event which is now triggered whenever the placeholder is cleared.
The placeholder can also be prevented if the `unselecting` event
is prevented.
This will also trigger the event when deleting every option from
the multiple select, so it is possible for the `unselecting` event
to be triggered multiple times when clearing a multiple select.
This adds tests to ensure that the `allowClear` option always works.
This closes https://github.com/select2/select2/issues/2954.
This should prevent users from running into unexpected errors when
they do not return an object with the `results` key containing an
array.
This closes https://github.com/select2/select2/issues/2950.
If the language that is passed in through the options is just a
string, like "en-US" or "pt-BR", Select2 will now try to load the
base language along with the requested language and "en". So
requesting "pt-BR" will try to load "pt-BR", "pt", and "en".
This also catches errors and triggers a warning about not being
able to load the file. This should be a more user friendly error,
and it fixes the problem where Select2 would completely fail to
initialize if a language could not be found.
This closes https://github.com/select2/select2/issues/2934.
Previously this would return `style` if it couldn't be resolved and
the `style` attribute on the element is set for some reason. Now it
will return `null`, because it tried to resolve the width but was
not able to. This will allow it to fall back to `element` by default,
or not set the width at all.
This closes https://github.com/select2/select2/issues/2935.
This exposes the default options for Select2 as
`$.fn.select2.defaults`. A default option can be set using the
`set(key, val)` option which is available. The key should use the
same formatting as the HTML data attributes.
This also adds some documentation about it.
This also adds more documentation and corrects the release notes
for these breaking changes. These modules will now only be included
in the full builds of Select2, which has been noted in a few places.
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.
