* 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.
This fixes a bug that was introduced in Select2 4.0.0 and only
partially fixed in Select2 4.0.6-rc.0 where the `title` attribute
that is set on the selection container (or individual selections,
for a multiple select) is not cleared when the text/title of the
option is not set. In most cases, users no longer see this issue
because the `text` property of most data objects is set, so the
`title` attribute will always be cleared correctly. There was a bug
for cases where the `text` property was not set, or where the `text`
property was set to an empty string, that resulted in the `title`
attribute persisting with the incorrect value.
We have fixed this issue by always removing the `title` attribute
from the selection (or not adding it in the first place, for a
multiple select) when the `text` and `title` properties of the data
object are empty or not present.
This also adds in a series of tests to ensure the `title` attribute
is set properly in a variety of cases, building upon the ones that
already existed.
Fixes#3895
This fixes a bug where if you cloned a Select2, the internal ID used
for mapping elements (specifically the `<select>`) to the in-memory
data store would be cloned as well, causing issues when you tried to
initialize Select2 on the cloned element. This was because we did not
properly clear all of the internal data and all of the internal
attributes that Select2 uses when we destroyed it. The internal
`data-select2-id` attribute was not being cleared, and this was the
attribute being used for the internal mapping.
Now we properly clear the `data-select2-id` attribute from the element
when we call `RemoveData` on the element. This aligns with what we
were trying to do, since we previously cleared out the internal store
for that ID, and fixes the issue we were seeing when cloning.
Fixes#5247
In order to enable the ability to uniquely identify a result by an ID
in the DOM, we generate a new ID for the result based on a combination
of things, including the container ID prefix that is generated and
used elsewhere in Select2. This has worked fairly well for use cases
including attaching Select2 to an existing `<select>` and loading in
options from a remote data set.
Unfortunately, because this process relied on the container ID being
used as a prefix, this failed for options which were automatically
generated on initialization using the `data:` option to Select2.
These were not being generated with an ID because at the time that
they were being generated, the data adapter was not aware of the
container it was being used in. This broke some accessibility features
because we had a mix of options in the results list with IDs, and
some without, so we fixed the ordering to make this work.
Option generation no longer happens when the data adapter is first
initialized, which is where it was previously happening, and instead
it now occurs when the data adapter is bound to the container. This
allows us to ensure that the data adapter is always aware of the
container it is being associated with, so now it will be able to
generate the result IDs.
This also fixes the tests for the array adapter as well as the
legacy `<input />` adapter so they properly bind to a container
during the test. This was causing test failures becuase the options
which would previously be generated during initialization were no
longer appearing.
Fixes#4350
* Rewrote maximumSelectionLength tests to use container
These brings the tests in line with other tests which we have, and
makes it easier to understand what is actually going on in the tests.
This also removes a redundant set of tests where we were testing with
=> 2 options being allowed. There are no current edge cases that would
have required this.
* Fix maximumSelectionLength being ignored by closeOnSelect
There was a bug where the `maximumSelectionLength` option would not
kick in if the `closeOnSelect` option was enabled. Normally, this
was enabled by someone in their global configuration, but it could
also be seen when somoene selected an option while holding the
meta/ctrl/alt keys. This would implicitly enable the `closeOnSelect`
behaviour, even when it was not globally enabled, and cause the bug.
This fixes that issue by listening to the `select` event which is
triggered whenever an option is selected, and triggers the "maximum
selected" message based on that event. This should now force the
message to be displayed, even when the results did not have to be
queried another time.
Fixes#3514Fixes#3860Closes#5333
This fixes a long-standing bug where if you tried to click in the
search box for a multiple select while there was text in it, the
dropdown would close and the text would be cleared. This caused
many unexpected issues, because it meant that you could only use
your keyboard to edit text within the search box.
This will still clear out the search field if you click within the
area of the selection which is not the search field. I'm not sure
if that is also unexpected behaviour, so for now I am going to
maintain it.
Fixes#3517Fixes#3808Fixes#5491Closes#5551
This is needed to screen readers know that the Select2 is disabled
when focus is put on the selection container. Because we were
mirroring the disabled state to the search input on a multiple
select in the past, this is really only needed for single select
elements which would not otherwise has the disabled property.
This was identified in a previous accessibility audit as being
something which Select2 did not properly report because we were
not setting the attributes properly.
Fixes#4575
This behaviour, where the focus was happening on a small asynchronous
delay, was added in commit 933189b92 late last year in a commit with
no supporting tickets or commit message explaining what the change
was trying to accomplish. This commit has effectly been reverted within
this commit, since it caused a regression in how focus was being
assigned that made it inconsistent with a standard `<select>`.
A test was added for this which ensures that we won't see that
regression again.
Fixes#5532Fixes#5185Closes#5552
Ever since the 4.0.0 release of Select2, there has been a bug where
if you enabled infinite scrolling but did not return enough results
on the first load of AJAX to show a scrollbar, then infinite
scrolling would not be enabled and you could not view anything other
than the first page of results. The solution for this was first
proposed in #3888 but it was closed off because of inactivity and
missing tests.
This fixes the issue by performing the check to see if more results
should be loaded both on scroll and also when the results are first
loaded. This solves the issue that we were seeing before, because
the plugin knows it needs to load in more results, just it did not
receive the scroll event before and thus was not able to actually
load in the new results.
This has the potential to trigger multiple AJAX requests to load in
multiple pages of results if the user has the ability to see many
options, but only a few are being loaded at a time.
This also adds tests for infinite scrolling, both to ensure that
it will attempt to load additional pages, even without the scrollbar,
and to ensure that the regular behaviour of not loading additional
pages when the scrollbar is visible is preserved.
Fixes#3088
This check is in place in most other places, mostly because we have
run into widespread issues under similar circumstances and we like to
avoid those, but it was forgotten here. There also were no tests
covering this, so it was never caught.
This adds tests that ensure that the option in the results list will
be generated with the correct "disabled" state based on whether or
not it, or a parent element, is marked as disabled.
This should have been easy: just check `element.disabled`
Unfortunately the `disabled` property is not inherited within the
option chain, so if an `<optgroup>` is disabled, the `<option>`
elements or other `<optgroup>` elements held within it do not have
their `disabled` property set to `true`. As a result, we needed to
use the `matches` method to check if the `:disabled` state is
present for the element. The `matches` method is part of the official
standard, but it was not implemented under that name for a while and
as a result Internet Explorer only supports it under the prefixed
`msMatchesSelector` method and older versions of Webkit have it
implemented as `webkitMatchesSelector`. But once we use this method,
it appears to consistently return the expected results.
This `matches` method and prefixed predecessors are not supported in
IE 8, but they are supported in IE 9 and any browsers newer than
that. Instead of buulding a very hacky solution using
`querySelectorAll` that was brittle, I have chosen to act like
everyone else and pretend IE 8 no longer exists.
Fixes#3347Closes#4818
This allows for more accurate resolution of the width when compared
to the `resolve` method. This is more relevant for jQuery 1.x, where
the `resolve` method cannot find the width of a hidden select box,
but it also applies to newer versions of jQuery where the `width()`
method provided by jQuery doesn't fully match `getComputedStyle()`.
Fixes#3278Fixes#5502Closes#5259
* Add test for losing focus when searching tag entries
* Revert unknown unit test fix
Removing this no longer breaks a unit test, and having it in here
results in the select box receiving focus unexpectedly. It's not
clear what problem this was solving, since it was manually applied
from a series of pull requests.
It claims to be fixing an issue that was specific to IE11, and I'm
willing to re-introduce that bug because there doesn't appear to be
a regression test for it, and it's breaking some critical use cases.
The goal should be to focus the search box if it would have normally
lost focus when the selection was updated.
Fixes#5485Fixes#5516Closes#5550
* Update tests to be compatible with jQuery 3.0.0
There was a change in jQuery 3 that ensures that the return value of `.val()` on a multiple select is always an array. This is a breaking change from previous versions, where `null` or `undefined` were returned in these scenarios. Because we cannot `assert.equal` on a list of possible values, these assertions were switched to `assert.ok` which should be good enough.
* Properly strip out units in positioning tests
Before we were assuming that there were no units, and only were we stripping them out if we were expecting 3 digits. Now we just strip out all non-digit characters, so that should do the job and get us what we want.
There was a change in jQuery 3.2.0 that caused the units to be returned in these specific calls. They were not previously being returned, so this was not actually an issue.
* Add automated testing against jQuery 3.4.1
No tests appear to be currently failing.
We needed to define the `qunit` module in the unit tests because there was a change in grunt-contrib-qunit 0.6.0 that breaks when you define an AMD loader. It expects that the AMD loader is also used to load QUnit, instead of just being used to support the tests, so if you don't define the qunit module it will just hang and do nothing. Luckily we have the helpers file to help us out here, since it allows us to globally define this module.
* Update dev dependencies
* Adjust dependencies versions to avoid unmet peer dependency error
* Update Travis CI node version to 8
* Recompile dist
This updates all of the minified files to use the latest uglifyjs version, which results in better compression (by a small margin).
* Remove SauceLabs credentials
SauceLabs is no longer used during builds, so we no longer need to include these encrypted credentials.
* Clean up badges
* Remove SauceLabs from the README
* Misc README fixes
* Disable Travis email notifications
Looks like we accidentally re-enabled these when removing IRC.
* Added deployments to NPM on tagged releases
Previously this was being done manually after each release, which resulted in a few releases not showing up on NPM for a significant amount of time. Now the builds should be automatically pushed, which should hopefully improve a lot of the issues we were seeing.
* Drop IRC notifications
We no longer use this IRC channel.
* Clean up .travis.yml
* Remove grunt ci
This is no longer needed now that we don't do anything special for CI builds. This also allows us to minify during CI builds, which will be useful for the tagged builds which depend on these minified files being up to date (so they can get released as well).
These two are required at build time to generate the full builds
of Select2 (for jQuery Mousewheel) and to inject the AMD loader
(for Almond.js). They are not required for anyone who depends on
Select2, since jQuery Mousewheel is an optional dependency.
This may result in some people needing to add jQuery Mousewheel to
their projects as a required dependency, if they were expecting
it to be added by Select2 before.
* select2.jquery.json - This was previously used by the jQuery Plugin
Registry which was shut down and put into read-only mode a few
years ago. Since nobody else appears to use this file, it doesn't
make sense for us to keep bumping the version in it and keeping it
up to date.
* vendor/ - This was needed back when the full version of Select2
actually bundled its own version of jQuery. Since we never actually
did this, we no longer need to keep the copy of jQuery around.
