Browser Support and Troubleshooting
Chosen’s original compatibility target includes Chrome, Firefox, Safari, and Internet Explorer 9. The maintained automated browser suite currently runs in Chrome with jQuery 4.0, 3.5, 1.12, and 1.7, plus Prototype 1.7. Mobile WebKit scenarios have separate coverage.
The jQuery adapter focuses its native search input directly after selection, so
it does not require jQuery's deprecated .focus() event shorthand.
This describes test coverage, not a promise that every historical browser receives equal maintenance.
if ($.fn.chosen.browser_is_supported()) {
$(".chosen-select").chosen();
}Modify the existing native select and trigger chosen:updated:
$("#country").append('<option value="new">New option</option>');
$("#country").trigger("chosen:updated");If application code replaces the entire <select> node, initialize Chosen on the new node.
A hidden select cannot be measured reliably unless it has an explicit CSS width. Chosen uses that width when available. Otherwise, initialize after the select becomes measurable or pass a width:
$(".chosen-select").chosen({ width: "100%" });If options are added after Chosen initializes and the control keeps its old
width, initialize with recalculate_width_on_update: true, then trigger
chosen:updated. An explicit width continues to take precedence.
Check ancestors for overflow: hidden, overflow: auto, transforms, stacking contexts, and modal-specific layout rules. z-index cannot escape ancestor clipping.
Chosen supports opening upward when there is not enough viewport room, but it does not move its dropdown to the document body.
The maintained fork initializes on mobile browsers. By default, its single and multiple pickers use an anchored dropdown, which can open upward near the bottom of the viewport. Set mobile_fullscreen: true to use the visible viewport on touch screens up to 600px wide. The opt-in view follows viewport changes as the keyboard opens, lets results scroll, and adds a Close button. React uses mobileFullscreen. The Prototype and jQuery adapters have phone-sized WebKit tests for tapping a single select, searching, and selecting an option; the Prototype tap behavior was corrected in PR #183.
Chosen keeps search input text at least 16px on touch devices to avoid iPhone Safari's automatic focus zoom. The rest of the control keeps its configured font size, and users can still zoom the page normally. The screenshot uses the touch sizing from PR #184.
This screenshot comes from a desktop WebKit phone-size test, which does not show the iOS on-screen keyboard. The 16px search input was also tested on a physical iPhone in Safari and stopped the focus zoom observed before the change. The full-screen screenshot also comes from emulated phone-sized WebKit and does not show the physical on-screen keyboard.
When reporting a mobile bug, include:
- Chosen version and adapter
- jQuery or Prototype version
- Device and OS version
- Browser and version
- A reduced page or repository
- Exact tap, focus, keyboard, and scrolling steps
Keep required on the native <select> so browser constraint validation remains authoritative. When reportValidity() reports an invalid value, Chosen temporarily aligns the native select with its visible control. It restores the select's original inline styles after a valid choice, form reset, or teardown. This applies to jQuery, Prototype, Vanilla, and React.
Use the Validation Styling demo to try the Check validity buttons. The screenshot shows Chrome's native required-field message beside the single-select control; popup wording and appearance vary by browser.
Chosen can initialize under script-src 'self' and style-src 'self' without
unsafe-inline. Load Chosen's stylesheet, library script, and your own
initialization script from allowed external URLs. If the browser reports a
blocked inline script, that application script did not run; move it to an
allowed external file or give it a nonce or hash permitted by your policy.
Harvest #3146 also exposed
one Chosen-generated inline width attribute on the classic multiple-select
search input. The fork removed it because chosen.css already supplies the
initial width. Runtime property updates still size controls. Strict-policy
browser checks cover jQuery, Prototype, Vanilla, and React in Chromium and
WebKit. See the CSP integration guide
for a policy and initialization example.
Chosen displays the browser's decoded native <option> text. Cyrillic options
such as “Привет” and “Київ” rendered and searched correctly in jQuery and
Prototype under Chromium and WebKit with a UTF-8 page. If the control shows
� characters, inspect the original select's option text before Chosen
initializes and check the page or server response encoding. Chosen cannot
reconstruct letters after the browser has replaced invalid source bytes.
If a keyboard handler in another editable element triggers chosen:open,
Chosen focuses its search input. The browser may then insert the same keypress
character there. This reproduces with @ from a contenteditable element in
Chromium and WebKit. Call event.preventDefault() for the application shortcut
before triggering chosen:open so the character is not inserted.
Update the original select's <option> elements and selected value, then
trigger chosen:updated on that same select. Use
$(select).trigger('chosen:updated') with jQuery or
select.fire('chosen:updated') with Prototype. If the response replaces the
select node, destroy Chosen on the old select first, then initialize Chosen on
the new node. The old generated control sits beside the select and remains
otherwise. Two successive native option
replacements and updates worked in both editions under Chromium and WebKit.
Reproduce with the same markup against the current demo. Check for application handlers that move focus during Chosen’s change event, stale copied markup, and CSS targeting old generated structure.
Open an issue with a reduced reproduction. Screenshots help with layout problems; a short recording helps with focus, touch, or scrolling behavior.