[VirtueMart5] Choices.js instead of Chosen.js

Details
Written by: Max Milbers
Category: VirtueMart Technics
Hits: 24

(written by Grok and reviewed by Max Milbers)

Audience: Anyone with a <select> in admin or shop that used Chosen
Library: Choices.js (Joomla web asset on J4+; VM wrapper module)
Related: VM Init Registry

1. Why Chosen went away

Chosen was jQuery. It aged. Joomla 4/5 already ships Choices. VirtueMart 5 wraps it so searchable dropdowns survive tabs, AJAX, and Alpine show/hide.

VirtueMart’s answer: one module, vmchoices.module.js. You mark selects. Core inits them. After AJAX you fire one event.

2. Which selects

Context Selector
Shop frontend select.vm-chzn-select (the old Chosen class still works as the opt-in)
Administrator almost every select, except .vm-chzn-add and language switchers

Init skips nodes inside display:none (Choices measures width at init; a hidden pane produces a dead control). When a tab becomes visible, re-init.

3. After AJAX or a tab

document.dispatchEvent(new Event('vmReinitChoices'));

Core tabs already do this on activeTab. Plugin-parameter forms that inject HTML do the same. You do not destroy and recreate by hand unless you own the instance.

4. Quick start

  1. Output a normal <select>. In FE add class vm-chzn-select if you want Choices.
  2. Do not load Chosen.
  3. After you inject markup, dispatch vmReinitChoices or rely on VMInit reInit.
  4. To keep a native select (e.g. a tiny filter), add vm-chzn-add in admin.

5. Do’s and don’ts

  • Do not init Choices on a select that is still display:none.
  • Do not copy width from Choices onto a cloned search input (core CSS already hides that 1px trick except when the list is open).
  • Do not assume this.value is current on change for a single select — listen to Choices addItem if you must. Multiple selects: do not assign el.value = v or you drop the other options.
  • Do not load a second Choices from a CDN.

6. Paths

  • media/com_virtuemart/js/choices/vmchoices.module.js
  • Event: vmReinitChoices