bd7ac9df03
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 #3347 Closes #4818
99 lines
4.0 KiB
HTML
99 lines
4.0 KiB
HTML
<!doctype html>
|
|
<html>
|
|
<head>
|
|
<link rel="stylesheet" href="vendor/qunit-1.23.1.css" type="text/css" />
|
|
<link rel="stylesheet" href="../../dist/css/select2.css" type="text/css" />
|
|
</head>
|
|
<body>
|
|
<div id="qunit"></div>
|
|
<div id="qunit-fixture">
|
|
<div class="event-container">
|
|
<select></select>
|
|
</div>
|
|
|
|
<select class="single">
|
|
<option>One</option>
|
|
</select>
|
|
|
|
<select class="single-empty"></select>
|
|
|
|
<select class="single-with-placeholder">
|
|
<option>placeholder</option>
|
|
<option>One</option>
|
|
</select>
|
|
|
|
<select class="multiple" multiple="multiple">
|
|
<option>One</option>
|
|
<option>Two</option>
|
|
</select>
|
|
|
|
<select class="groups">
|
|
<optgroup label="Test">
|
|
<option value="one">One</option>
|
|
<option value="two">Two</option>
|
|
</optgroup>
|
|
<optgroup label="Empty"></optgroup>
|
|
</select>
|
|
|
|
<select class="duplicates">
|
|
<option value="one">One</option>
|
|
<option value="two">Two</option>
|
|
<option value="one">Uno</option>
|
|
</select>
|
|
|
|
<select class="duplicates-multi" multiple="multiple">
|
|
<option value="one">One</option>
|
|
<option value="two">Two</option>
|
|
<option value="one">Uno</option>
|
|
</select>
|
|
|
|
<select class="user-defined"></select>
|
|
</div>
|
|
|
|
<script src="vendor/qunit-1.23.1.js" type="text/javascript"></script>
|
|
<script src="vendor/jquery-3.4.1.js" type="text/javascript"></script>
|
|
<script src="../dist/js/select2.full.js" type="text/javascript"></script>
|
|
|
|
<script src="helpers.js" type="text/javascript"></script>
|
|
|
|
<script src="a11y/selection-tests.js" type="text/javascript"></script>
|
|
<script src="a11y/search-tests.js" type="text/javascript"></script>
|
|
|
|
<script src="data/array-tests.js" type="text/javascript"></script>
|
|
<script src="data/base-tests.js" type="text/javascript"></script>
|
|
<script src="data/inputData-tests.js" type="text/javascript"></script>
|
|
<script src="data/select-tests.js" type="text/javascript"></script>
|
|
<script src="data/tags-tests.js" type="text/javascript"></script>
|
|
<script src="data/tokenizer-tests.js" type="text/javascript"></script>
|
|
|
|
<script src="data/maximumInputLength-tests.js" type="text/javascript"></script>
|
|
<script src="data/maximumSelectionLength-tests.js" type="text/javascript"></script>
|
|
<script src="data/minimumInputLength-tests.js" type="text/javascript"></script>
|
|
|
|
<script src="dropdown/dropdownCss-tests.js" type="text/javascript"></script>
|
|
<script src="dropdown/positioning-tests.js" type="text/javascript"></script>
|
|
<script src="dropdown/selectOnClose-tests.js" type="text/javascript"></script>
|
|
<script src="dropdown/stopPropagation-tests.js" type="text/javascript"></script>
|
|
|
|
<script src="options/ajax-tests.js" type="text/javascript"></script>
|
|
<script src="options/data-tests.js" type="text/javascript"></script>
|
|
<script src="options/deprecated-tests.js" type="text/javascript"></script>
|
|
<script src="options/translation-tests.js" type="text/javascript"></script>
|
|
<script src="options/width-tests.js" type="text/javascript"></script>
|
|
|
|
<script src="results/focusing-tests.js" type="text/javascript"></script>
|
|
<script src="results/option-tests.js" type="text/javascript"></script>
|
|
|
|
<script src="selection/allowClear-tests.js" type="text/javascript"></script>
|
|
<script src="selection/containerCss-tests.js" type="text/javascript"></script>
|
|
<script src="selection/multiple-tests.js" type="text/javascript"></script>
|
|
<script src="selection/placeholder-tests.js" type="text/javascript"></script>
|
|
<script src="selection/search-tests.js" type="text/javascript"></script>
|
|
<script src="selection/single-tests.js" type="text/javascript"></script>
|
|
<script src="selection/stopPropagation-tests.js" type="text/javascript"></script>
|
|
|
|
<script src="utils/decorator-tests.js" type="text/javascript"></script>
|
|
<script src="utils/escapeMarkup-tests.js" type="text/javascript"></script>
|
|
</body>
|
|
</html>
|