I use Bootstrap 5 with the plugin Chosen to add a search functionnality on long dropdowns. I used a css theme for Chosen that was designed to imitate Bootstrap 4 but the result is fine.

The issue is that form validation styles are not applied to the chosen select.

I've artificially managed to apply style to the chosen element depending on the main select validating state when the form is submitted :

function validate_chosen(element) {

var select = $('#'+element.id + '_chosen .chosen-single');
if (element.checkValidity()) {              
    select.addClass('is-valid');  
    select.removeClass('is-invalid');
}
else {
    select.addClass('is-invalid');  
    select.removeClass('is-valid');
 }
}

but that solution looks gross and i've still an issue with the style not updating when the value is changed. I've tried to add "click" event to the chosen list but it seems that the chosen JS takes upper hand on my events.

Could you help me to sort this out ? I wouldn't mind switching to another plugin if it had similar functionalities but better integration with the bootstrap look and feel.

Thank you