Integration between wanakana and Alpine.js fails after unbinding a DOM element from wanakana

[lpares12]

Issue Type

• Bug
• Feature

Description

Integration between Alpine.js and wanakana fails after the wanakana.unbind(domElement) call. After this, Alpine variable is not correctly updated, and only the DOM.value is usable. Not sure if the same problem arises with other framworks.

For example, If I have the following input:

<input id="inp" type="text" x-model="inputWord" />
<button x-on:click="result(inputWord)">RUN</button>

Where inputWord is an Alpine.js variable that will hold the value entered in the input. result() is a function that will print this variable and unbind and bind the DOM element.

Whenever we type some text after the bind -> unbind -> bind sequence has been executed, even though the DOM element displays the word correctly, the Alpine.js variable is not updated properly. The last syllable of the japanese word remains in romaji.

Steps to reproduce

You can reproduce it here: https://jsfiddle.net/pnwhrtzx/

1- Type any japanese word, for example I typed "mukashi" once. And press RUN.
2- Note that the console prints both the DOM element and the alpine variable as むかし. After this, the unbind and bind functions will be called again.
3- If you type "mukashi" (or any other japanese word) again, you will see that the last syllable is not correctly translated into hiragana for the alpine variable (むかshi), even though the DOM shows the correct value (むかし).

Workaround

For now I'll use document.getElementById("inp").value instead of the Alpine.js variable inputWord. But I would like to avoid this if possible.

Versions

• Browser: Google Chrome Version 96.0.4664.45
• OS/Device: Ubuntu 20.04.3
• Keyboard/Input Method: keyboard

[lpares12]

Something similar happens with Vue 3 after installing with npm. Even worse, it happens always, without the need to perform an unbind and bind again

[DJTB]

These may potentially have been fixed by #153 in v5.1.0