Choices icon indicating copy to clipboard operation
Choices copied to clipboard

Alpine.js compatibility breaks with <select> value becoming object '{value: "x"}' instead of 'x'

Open Fak3 opened this issue 4 months ago • 1 comments

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

Fak3 avatar Oct 12 '24 11:10 Fak3