Is your feature request related to a problem? Please describe.

Current version bundled with J5 of choices JS does not support refresh when the select's options are handled by external scripts (for example options html injection directly via innerHTML or similar) and the state of the select rendered via chosesjs cannot be refreshed properly.

this piece of code would not work with current version in J5.3 while it works OK with latest choicesjs :

jQuery(wrapper.select).on('chosen:updated', function (e) {
          wrapper.choicesInstance.refresh();
        });

where wrapper is the Joomla's custom element with already initialized choicesjs.

Describe the solution you'd like

Please upgrade the choicesjs to the latest per:
https://github.com/Choices-js/Choices
specifically:
https://cdn.jsdelivr.net/npm/choices.js@9.0.1/public/assets/scripts/choices.min.js

Additional context

See below code to convert all selects into joomla-field-fancy-select custom element.

  function wrapSelect(select) {
    // Avoid wrapping if already inside a <joomla-field-fancy-select>
    if (
      select.parentElement?.tagName.toLowerCase() === 'joomla-field-fancy-select'
    ) return;
    
    if (select.className.indexOf('choices__input') >=0 ) return; 

    // Create the wrapper
    const wrapper = document.createElement('joomla-field-fancy-select');
    var placeholderTest = select.querySelector('option[value="0"]'); 
    var placeholderText = '';
    if (placeholderTest) {
       placeholderText = placeholderTest.value;
    }
    select.setAttribute('data-placeholder', ''); //remove unlisted text 

    wrapper.innerHTML = select.outerHTML;
     
    select.replaceWith(wrapper);
   
    //const newSelect = wrapper.querySelector('select');
    wrapper.select.addEventListener('chosen:updated', function (e) {
        console.log('chosen updated', newSelect); 
        wrapper.doConnect(); 
      // Put your specific code here
    });
     wrapper.addEventListener('chosen:updated', function (e) {
        console.log('chosen updated', wrapper); 
        wrapper.doConnect(); 
      // Put your specific code here
    });
    jQuery(wrapper.select).on('chosen:updated', function (e) {
            console.log('Caught in jQuery');
          wrapper.choicesInstance.refresh();
            
            
            
        });
  }

  function wrapAllExistingSelects() {
    document.querySelectorAll('select').forEach(wrapSelect);
  }

  function observeNewSelects() {
    const observer = new MutationObserver((mutations) => {
      for (const mutation of mutations) {
        mutation.addedNodes.forEach((node) => {
          if (node.nodeType !== 1) return;

          // Single select
          if (node.tagName.toLowerCase() === 'select') {
            wrapSelect(node);
          }

          // Or container that includes selects
          node.querySelectorAll?.('select').forEach(wrapSelect);
        });
      }
    });

    observer.observe(document.body, {
      childList: true,
      subtree: true,
    });
  }

  document.addEventListener('DOMContentLoaded', () => {
    wrapAllExistingSelects();
    observeNewSelects();
  });

  //stAn - we disable chosen if fancy select is loaded
  if (typeof jQuery !== 'undefined') {
    Object.defineProperty(jQuery.fn, 'chosen', {
      value: function () { 
        //this.parentElement.doConnect(); 
        //this.wrapper.doConnect(); 
        return this; },
      writable: false,
      configurable: false,
    });
  }