Choices
Choices copied to clipboard
Alpine.js compatibility breaks with <select> value becoming object '{value: "x"}' instead of 'x'
When user selects <option value="x">, then <select> value bound with alpinejs x-model attribute becomes '{value: "x"}' instead of 'x'
To Reproduce
<script defer src="https://cdn.jsdelivr.net/npm/[email protected]/dist/cdn.js"></script>
<script defer src="https://cdn.jsdelivr.net/npm/[email protected]/public/assets/scripts/choices.min.js"></script>
<select
x-init="new Choices($el, {})"
x-data="{curvalue: null}"
x-model="curvalue"
@change='console.log(JSON.stringify(curvalue))'
>
<option value="x">First item</option>
<option value="y">Second item</option>
</select>
Expected behavior Expected same behavior as regular <select>: When user selects <option value="x">, then <select> value becomes 'x'
Choices version and bundle
- Version: 11.0.2
Desktop (please complete the following information):
- OS: openSUSE Tumbleweed
- Browser: Firefox
- Version 131.0