`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.
This is inspired by https://github.com/ivaynberg/select2/issues/2826
and starts the general transition to using selectors with a lower
specificity. This should make it considerably easier to override
the styles in the long run.
Unfortunately libsass does not support the SASS 3.3 style for BEM
where we can just use `&__m` for defining sub-modules. For now we
are still using a limited amount of nesting, but nowhere near as
much as we did in the past.
Now the search box is automatically resized for placeholders to
fit the available space, so we don't need to worry about the
placeholder not being visible. When the placeholder doesn't need
to be visible, the size of the search box is determined based on
the length of the current search term.
This adds a search box to the main container for multiple select
boxes, similar to the what the old version had. This can still be
swapped out such that the search box displays above the results
like it previously did.
The placeholder for multiple selects will also now use the input
attribute of the search box instead of generating a custom element.
This also changes the selector for the search container to
`.select2-search`, which is consistent with the old class and
reduces the complexity of the selectors.
This fixes an issue with how decorators worked, where the constructor
from the parent class would clobber the custom constructor that is
generated for the new decorated class. This has been fixed by
excluding the constructor from the list of fields which are
transferred when decorating classes.
This adds a dictionary for converting diacritics to a normalized
representation. This dictionary is used in the default matcher.
The code for stripping the diacritics was pulled from the current
implementation in Select2 3.x.
This migrates over the required English translations under their
new names.
The "Searching" message has also been adjusted to use "Searching..."
instead of "Loading more results...", which is what it used to
say sometimes.
This also changes the AJAX handler to call `abort` when needed.
Now when searching, a loading message is prepended to the top of
the results. This replaces the old spinner image and allows for it
to be translated across different languages.
The loading message can be styled differently and is passed
through the results formatters.
Previously, a result was no longer highlighted when the mouse was
no longer over it. While this was useful for resetting the
highlight automatically, we started doing this when a new result
was highlighted to make sure that we never had multiple options
highlighted.
Now, a result will always be highlighted until the highlight is
removed when the next result is highlighted. While this shouldn't
affect many users, it is closer to how native select boxes work.
This also allows users using keyboard navigation to jump between
mouse and keyboard navigation without the highlight reseting to
the top of the results.
This fixes many of the speed issues the results had when working
with large data sets. jQuery has been completely dropped, with the
exception of setting the data, which does not require a jQuery
object but instead works directly with the DOM. This does not
include options with children, which still uses jQuery to deal
with the nested objects.
This only works with IE 8+, which is fine.
This fixes caching when querying, so the data object no longer
needs to be completely regenerated whenever the `<option>` is
queried.
While this does not fix the speed issues on the first opening of
the instance, it does fix the speed issues during searching.
This improves the speeds of creating the `<option>` tags for array
data. By creating the HTML ahead of time and putting it into an
`<option>` element before passing it to jQuery, it cuts down on the
time it takes for jQuery to process the HTML string and convert it
into DOM elements. This proved to be incredibly slow.
This also changes the `item` function to return early when the
data exists. The `$e.data` call has also been switched to a
`$.data` call, which doesn't need to check the DOM to see if the
data attributes already exist. This cuts down on a bit of wasted
time, as the `data` key should never be present in the DOM, and it
should be ignored if it is.
Now the options are mostly generated by hand before being passed
off to jQuery for templating. This fixes much of the speed issues
we had when they were entirely being generated through jQuery.
This converts individual objects passed in through the `array`
parameter to `<option>` tags when Select2 is initialized. This
removes a lot of duplicate code from the `ArrayAdapter`, and keeps
everything closer to the native `<select>` element.
This introduces a breaking change from previous versions of Select2,
where the initial value for array data was blank, even if a blank
option was not present in the original array of objects. Now the
first object passed in will be selected by default, following the
behavior of a standard `<select>` element.
This breaking change does not affect `<select multiple="multiple">`
elements, which by default have no selection.
The matcher example now matches the old matcher example, and the
compatibility module has been turned into a function decorator
instead of a class decorator.
Only show the "No results found" message when there are no results
visible in the list. This avoid issues when loading more data, and
it returns no results.
Only try to see if the load more button is visible if it is present
in the DOM. This prevents making continuous requests when there are
no more results.
This starts work on the example, which currently uses the GitHub
API.
The `ajax.delay` option has been added that allows for debouncing
requests made within a certain number of milliseconds.
This allows for any control to emit key events, and for the Select2
instance to handle them. So now the search box will allow for
results to be scrolled and selected, bringing back the old expected
functionality. This also stops triggering new queries when the
arrow keys are pressed.
The container will also be automatically focused when the dropdown
is closed, which is consistent with the old Select2.
The results will no longer be queried on initialization, but
instead will be queried when the dropdown is opened. This is more
consistent with the previous version of Select2.
The search box will now be cleared when the dropdown is closed.
The placeholder will not only be automatically hidden if the
results adapter was not already overridden. This will allow users
to override the results adapter to now hide the placeholder, if
they do not want that functionality.
This allows them to be overridden, allowing for things like
attaching the dropdown to a different part of the DOM.
The id is also now generated in a function that can be overridden.
Now that `define` and `require` are never made public, we have to
build everything to support `$.fn.select2.amd` while also working
with other AMD loaders.
This will prevent leaking variables, and will remove the possibility
of Select2 not working well with other plugins which support
AMD loaders. The `define` and `require` methods are now aliased
under `$.Select2.amd` for use inside additional files, such as
translations.
Tags no longer takes an array, as pre-existing tags should already
exist as options in the data adapter. A compatibility module will
later be added to convert tag data that is passed in to array data.
Tags allow for users to enter their own options, which will be
added to the beginning of the results list.
When using array data, and an option is selected, the data that is
attached to the DOM element will be run through `item` and should
have any private, automatically generated attributes added and
merged with it.
Now the accessibility for the single select box better matches what
is picked up for a native select.
This fixes an issue with us always setting `aria-activedescendant`,
which caused Orca to always say the full path to the selected
result, instead of saying that the box was a combobox with a
selection. This means that the `aria-activedescendant` attribute
will now only be set when the dropdown is open.
This also switches the results list from a listbox to a tree, which
is what Firefox tells screen readers that a standard select is.
Combined with a change to use `role=group` and `aria-label` for
option group labels, screen readers will now announce the group
that they are in as well.
Now the Select2 instance is correctly recognized as a combobox, and
the selected option is read aloud when it is focused, just like in
a standard select box.
This works by generating semi-random ids that are used for the
ARIA attributes. These are not intended to be consistent by any
means, they are just generated to make the instance accessible by
screen readers.
When the main container is focused, you can now move the highlighted
result by using the up and down arrows on the keyboard.
This does not yet keep the highlighted result visible at all times,
and it only is implemented on single selects, but that will come in
the future.
This makes quite a few changes, one of the major ones being the
removal of classes for marking options as selected or selectable,
and instead using the ARIA attributes which should already be
present.
Placeholder support has been implemented as a separate module, so
any selection container should be able to be decorated and get
instant placeholder support. It hooks into the updating method of
selections, and determines when to display the placeholder based
on the options that are being updated.
It works in the same way as the old placeholders. If no options
are selected and being displayed, like in the case of a multiple
select, then the placeholder will always be shown. If one option
is being displayed, and the id of the placeholder matches the id
of the selected element, then the placeholder will be shown. This
is similar to the functionality that was present in Select2 2.x,
where the placeholder could be passed in as an object that would
be compared to the selection.
This still requires that, for single selects, the first element
must match the placeholder id. Because the default placeholder id
is a blank string, this will maintain backwards compatibility with
past versions where the first option should be blank. This can
still be overridden to point at a different id, keeping support
for systems where the placeholder doesn't use a blank value.
**Note:** This does not hide the blank option for single selects,
but that will still be maintained for backwards compatibility
within the results module. It will not depend on a placeholder
being present, but instead will hide any options with blank text.
We have to enforce ids being strings as the values of options within
a select will always be an id. This fixes an issue that we had with
array selections not being highlighted in the results.
This adds decorator support in a very basic way, but enough that
it doesn't take a lot of effort to get it implemented.
This also starts work on splitting things out for theming.
