It sounds like you're experiencing an issue where the styling provided by Choices.js is lost when Livewire updates the DOM. This can happen because Livewire replaces parts of the DOM to reflect the state change, which can remove the enhancements that Choices.js applies.
To solve this, you can re-initialize Choices.js after Livewire makes updates to the DOM. You can do this by listening to Livewire's updated event and then reapplying Choices.js to the select elements.
Here's an example of how you might do this:
document.addEventListener('livewire:load', function () {
// Initialize Choices.js when the page loads
var programSelect = new Choices('#program-select', { /* your options here */ });
var coursesSelect = new Choices('#courses-select', { /* your options here */ });
// Listen for Livewire update event
Livewire.hook('element.updated', (el, component) => {
// Check if the updated element is one of your select inputs
if (el.id === 'program-select' || el.id === 'courses-select') {
// Destroy the old Choices instance
if (el.id === 'program-select') {
programSelect.destroy();
} else {
coursesSelect.destroy();
}
// Re-initialize Choices on the updated select element
new Choices(el, { /* your options here */ });
}
});
});
In your Livewire component (PostsCoursesModels2.php), make sure you have the correct wire:model for your selects. For example:
<select id="program-select" wire:model="selectedProgram">
<!-- Options -->
</select>
<select id="courses-select" wire:model="selectedCourses" multiple>
<!-- Options -->
</select>
Make sure to replace #program-select and #courses-select with the actual IDs of your select elements, and provide the necessary options for Choices.js initialization.
By re-initializing Choices.js after Livewire updates the select elements, you should be able to maintain the styling and functionality provided by Choices.js.