masokky wrote a reply+100 XP
5mos ago
I've solved this issue manually parsing component.lastFreshHtml property in Livewire.hook, every time you change the choices livewire will return the generated HTML, we have to parse the options and assign them to ChoicesJs.
I am using Livewire 2 by the way, I don't know this code will work with Livewire 3 or not. I haven't tried it.
Here's my code
Livewire.hook('message.processed', (message, component) => {
const officeField = $('#office');
const parser = new DOMParser();
const doc = parser.parseFromString(component.lastFreshHtml, 'text/html');
const options = doc.querySelectorAll('#office option');
const choices = Array.from(options)
.map(opt => ({
value: opt.value,
label: opt.textContent.trim(),
selected: opt.hasAttribute('selected')
}));
officeField.clearStore();
officeField.setChoices(choices, 'value', 'label', true);
});