This is how it used to work pre-4.0.9, where the bound handlers for
resizing and positioning the dropdown were bound at the first time
that the dropdown was opened. This was changed for the 4.0.9 release
as a part of 3f75227a693 where it was not clear why this late binding
was happening, so it was removed to simplify the code.
The late binding is necessary because the handlers within results for
generating the results, and thus the content within the dropdown,
are bound after the handlers for the dropdown are bound. This results
in situations where the handlers for positioning the dropdown are
bound before the dropdown is updated with content, resulting in the
positioning being calculated for the old content and thus being
incorrectly placed. By binding the positioning handlers after the
dropdow is opened for the first time, we can ensure that the
positioning handlers are bound after the result handlers, so we
won't have to worry about this issue.
The handlers are only bound once because they only need to perform
all the calculations a single time. There is no need to keep checking
all of the calculated styles more than we need to, so this is guarded
by a flag which ensures it is only bound a single time per dropdown.
Fixes#5619Fixes#5620
* Made the test suite for translations more complete
There were previously tests for translations within the test suite,
but they only covered a select few problem cases that had previously
been fixed. They did not cover the majority of cases, which makes
changes to how the translation mechanism for Select2 works a bit
more challenging.
So this adds tests for the majority of edge cases around translations,
including how one would expect the fallback chains to work and also
around how defaults interact with the language options. This should
not be considered an exhaustive list of all of the edge cases, but
it should be good enough to refactor the internals and not have to
worry as much.
The one change of note to this test file is that we are now properly
resetting the defaults in between tests. This should fix any issues
that we may have seen where the defaults were not being reset, and
thus tests were not properly isolated and would start to interfere
with each other. This required pulling the module definition down
below the imports, since we need to reference the defaults within
the module definition.
Many of these tests will fail because the translation system is
broken in many small, unrealized ways. The next few commits should
make these pass and fix the issues that we are seeing.
* Consistently resolve the language option
This fixes an issue that we have had for a while where we did not
have a way to consistently take the `language` option from a string,
array, object, or whatever else is specified and resolve it into
`Translation`-compatible objects or strings. Now there is a new
internal `_resolveLanguage` function which is able to take any of
the supported ways of specifying a language and resolve it down into
the supported language chain.
This now means that we can properly resolve the following cases,
and we can do it in a consistent manner.
* When the language is specified as just a string (for example: "en")
* When the language is specified as a string containing a region
(for example: "en-US")
* When the langugae chian is specified as a list of strings (for
example: ["es", "en"])
* When the language is specifid as an object containing messages
(for example, when a user overrides only a subset of messages)
* When the language is specified as a list of strings and objects
(for example, when a user wants to use a language other than
English and also wants to ovverride some default messages)
* When the language is not specified at all (the most common case)
* When the language is specified as an empty object (an edge case
that allows us to skip processing it)
This allows us to consistently produce the language fallback chain
based on the given `language` option, something which we could not
actually do before because we didn't have a consistent chain. This also
means that now the `language` option will consistently be an array
after going through this process, instead of being any number of
types before.
The translation generation currently does not support having objects
and strings mixed as a part of the fallback chain, despite that being
how the default chain has always worked, and as such there are still
failing tests around this.
* Move English to always be at the end of the language chain
This was technically true in most cases in the past, because if a
language chain was manually specified then it would have English
injected into the end of it anyway. This is needed because not all
translations are complete, but we know the English one is, and
Select2 relies on the translation that it uses being complete.
This will result in cases where a user specifies a language but still
receives English translation for some things, which is what users
have historically seen when using partial translations anyway. This
just ensures that there will always be a complete translation that
is being used, so they won't get unexpected errors and will instead
get unexpected English translations.
* Filter out repeated languages in fallback chain
This is mostly being done for performance reasons, since Select2
will not behave any differently when there are duplicates, but it
makes things cleaner when you ask for the fallback chain and it
only contains unique values.
This cannot distinguish between languages specified by name (string)
and languages specified by the contents of their language file
(such as the default, English), but this should generally not be
an issue.
* Convert the language chain into a finalized translation
This extracts the logic for converting parts of the language chain
into the finalized `Translation` objects out into its own method,
with some small fixes for edge cases.
This can now properly convert a language chain containing both
strings and objects into a translation object that contains them
both.
We no longer need to special case the `language` option being an
array since we know that it will be an array once the language
resolution process is completed.
* Switch default translation to be empty
This should have no external effects, but it fixes an interesting
bug where resetting the defaults would not always reset custom
translations. This was because it was possible to modify the
included English translation when you were setting a default for the
language option.
This should not cause any issues because the English translation is
now appended to the end of the language chain when the defaults
are applied, which means that English will continue to exist as the
final fallback.
* Inherited `lang` attribute should be below the default in the chain
It was pointed out in #5468 that the `lang` attribute, when inherited
from a parent element, was above the option set in the global default
within the inheritance chain. While this makes sense because of how
we inherit other properties, it does not make sense for the `lang`
attribute.
The inheritance chain for the `language` option has been adjusted
to be the following:
1. The `lang` attribute on the original `<select>` element
2. The `data-language` attribute on the original `<select>` element
(because of how `data-*` attribute resolution affects options)
3. The `language` option specified when initiailizing Select2
4. The `language` Select2 default
5. The `lang` attribute on a parent of the `<select>` element
While this is a breaking change, we believe that this change will
have minimal to no impact on real-world usage of Select2, because
of how the `lang` attribute is generally used within documents.
We believe this will now make setting the default language through
JavaScript easier and more reliable, bringing it in line with how
we recommend it is done within the documentation.
This was implemented through a new method `Defaults.applyFromElement`
instead of within the old `Options.fromElement` method because it
relies on the global defaults object. While we could have reached
in to the internals in order to apply it appropriately, it made
more sense to handle the proper resolution through a single
consistent place.
This was not implemented in the `Defaults.apply` method because that
method is not typically passed in a reference to the original
`<select>` element that it is applying the options for.
Closes#5468
* Properly resolve language chains with dictionaries
It is possible for a language chain to be specified that includes
both a dictionary and the string translation as a part of the same
chain, but we would previously throw an error because we assumed
that the list could only contain strings and that dictionaries
would never be included in lists.
This fixes the issue so language region normalization only occurs
when a string is specified in the language chain, which is what we
were previously assuming was the case but was not actually.
This also now resolves the entire language option during the
`Defaults.apply` method. This should be a no-op except for internal
tests, because the `Defaults.applyFromElement` method should almost
always be called in real-world scenarios.
* allowClear no longer shifts selections to a new line
This fixes an issue that we have had with the "x" icon used by the
`allowClear` option where selections that just barely interacted
with the position of the "x" icon would be pushed to a new line
that was separate from the normal second line of selections. This
case was pretty rare, because you only had a ~9px area where the
interaction could occur.
The issue was cuased by the "x" icon being sized for the height of
the text in the selection choices, which should be the same as how
the selection choices themselves are sized. Unfortunately this did
not take into account the fact that the selection choices are given
a 1px border which increases their size by 2px, which is what lead
to the odd behaviour. This behaviour could not be replicated without
the 1px border because the height would then line up correctly.
The issue can be fixed by adding a 2px margin to the bottom of the
"x" icon, which would force overlapping selections on to the correct
second line of selections. This was the method that many users have
been using to correct this issue, but was not the method we chose to
use. A 1px padding has been added to the "x" icon instead, which
should expand the touch area of the "x" by a little while also
increasing the height of the "x" by enough to prevent the overlapping.
Fixes#4470
* Remove hard-coded height in tests
Because tests are executed on different browsers, and because each
browser sets their own line height, we cannot depend on the height
of the default Select2 being consistent across browsers. As a result,
we must write our tests to calcualte the expected height based on
known data. In the case of this test, we can calculate ahead of time
what two rows of selections is supposed to look like, instead of the
edge case that we can otherwise encounter.
* Move search accessibility tests under selection tests
* Set aria-activedescendent and aria-owns on selection search
This is a reduced version of a5ab08b49cb which is split out to only
set the `aria-activedescendent` and `aria-owns` attributes on the
search box located within the selection container. This is the search
box used within a multiple select, and previously it did not always
set these two attributes correctly.
One major change here is that we clear the `aria-activedescendent`
attribute if the result that is selected does not have an ID. This
was not being done previously, instead the attribute was still
containing the old value, and it meant that sometimes the wrong
result was being pointed to.
The test coverage for this was also expanded to ensure that these
attributes are properly being set.
* Set aria-activedescendent and aria-owns on dropdown search
This is a reduced version of a5ab08b49cb which is split out to only
set the `aria-activedescendent` and `aria-owns` attributes on the
search box located within the dropdown. This is the search box used
within a single select, and previously it did not set these two
attributes at all. Additionally, it did not set the `aria-autocomplete`
attribute, which is also needed for screen readers to properly read
through the list of results.
There was previously no test coverage for this, so the tests were
largely copied from the tests for selection search.
* Set proper ARIA roles on result elements
When Select2 4.0.0 was originally written, accessibility was tested
using the Orca screen reader and Mozilla Firefox as the browser.
Because a `<select>` box could contain `<optgroup>` elements, which
can further contain additional `<option>` elements, Orca would read
out a `<select>` box as a tree view. Apparently Orca was the only
screen reader to do this, but Select2 maintained this behaviour
because the ARIA spec did not allow grouping elements for the right
roles.
In the ARIA 1.2 spec, an element with the role of `listbox` (which
is the proper one for representing a `<select>` element) can now
contain elements with the role of `group` that can be used for
grouping. This means that now Select2 can switch to use the proper
ARIA roles to better match how most browsers represent the `<select>`
element out of the box.
As a result, instead of the Select2 results list being represented
as a tree containing tree items, it is now represented as a listbox
containing options and groups. Notices will be represented as an
alert, which more closely represents what they were being used for.
This is a reduced version of a5ab08b49cb which is split out to only
fix the `role` attributes on elements within the results list.
* Switch search boxes to have a role of searchbox
I'm pretty sure this is implicit now, but since we used to specify
that the search box had a role of `textbox`, we may as well migrate
that over to specify the role of `searchbox`. This is different
from the original pull request where this role was changes to
`combobox`, but that is because we are working against the ARIA 1.2
spec and the original pull request was working agianst the ARIA 1.0
spec, which required the search box to have that role.
* Set aria-controls instead of aria-owns on search boxes
In ARIA 1.1, there was a switch to use `aria-controls` on the search
box to point to the results list instead of using `aria-owns`. This
is required because the `combobox`, in our case the selection
container, should have the `aria-owns` attribute pointing to the
results list. And because only one elment can own another element,
we must fall back to `aria-controls` to represent that relationship.
The tests have also been adjusted to reflect this new discovery.
This fixes a bug with the search box where, when it had a placeholder,
it would expand the width of the selection container because it was
too large. This bug was specifically caused by the search box not
factoring in the padding surrounding it when caclualting the width
it needed to be, which resulted in the search box extending
outside of the selection container. This bug was easy to notice if
your Select2 was set to have 100% width and if the container it was
held within was not a block element.
This fixes the bug by switching to using `width()` for calculating
the search width instead of using `innerWidth()`, which ignored the
surrounding padding.
Fixes#5517Closes#5518
This fixes an issue which was usually observed when working with
AJAX results sets and having a message being displayed, usually the
minimum characters message or an error. The dropdown would display
up, like it was supposed to, but the message would appear to be
floating above the container and detached.
This was occuring because the dropdown position was not being
calculated whenever a message was displayed in the results, only
when the results were loaded or new results were appended to an existing
results set. There are plenty of situations where this could have
caused issues, but somehow most of the reports were around a very
specific situation with AJAX which could be reproduced on the
examples site.
Fixes#4614Fixes#4616Fixes#5253Closes#5196
* Reposition dropdown whenever items are selected
This fixes an old bug where if you had a multiple select with the
`closeOnSelect` option set to `false` and many options being
selected, the dropdown would not reposition itself if the selected
options expanded the container down another line. This was because
the dropdown was only being repositioned when it was opened, closed,
or if something around it was scrolled or resized. Unfortunately,
in most cases none of these happened and the dropdown would start
covering the selections.
This was fixed by telling Select2 to resize the dropdown when new
options are selected or existing options are unselected.
Fixes#4377
* Attach positioning handlers at bind time
The positioning handlers have been attached at the time that the
dropdown is opened since when they were first committed many years
ago. It's not actually clear why this was being done, since they
don't rely on anything involving the dropdown being open. This
removes the flag and process for setting these handlers only after
the dropdown was opened for the first time, and moves these handlers
to always be set at bind time.
