up-autosubmit on alpinejs input field

[davisums]

I'm using AlpineJS for some extra reactivity, specifically to change the ui around an input field.
The form has an up-autosubmit attribute, and it works fine on fields that aren't "manipulated" by alpine.

Surprisingly, when the non-alpine-field is updated, the form is autosubmitted and the value of the alpine-field is sent as well, and it contains the right value.

Any idea how I could fix this? I've thought of using $watch (from alpine) but was wondering if there's anything I can do with unpoly itself (or if this is a bug).

The code to make this more concrete:

<div x-data="{gender: 'male'}" id="form">
  <form method="POST" action="/8pwr5e31/" up-autosubmit up-target="#form">
    <input type="text" x-model="gender" name="gender" value="male" hidden>
    <input type="text" name="working-autosubmit" placeholder="test autosubmit here">
  </form>
  <div class="btn" @click="gender='male'" :class="{'active': gender == 'male'}">male</div>
  <div class="btn" @click="gender='female'" :class="{'active': gender == 'female'}">female</div>
</div>

Live demo: https://jsfiddle.net/8pwr5e31/1/

[triskweline]

I haven't worked with AlpineJS, but [up-autosubmit] relies on input or changed events being fired. If Alpine changes the value of an input without firing such an event, Unpoly will not know that anything changed.

was wondering if there's anything I can do with unpoly itself

You can implement this example without any JavaScript, by having the gender buttons be labels for a hidden radio button: https://jsfiddle.net/w4a3rp82/5/

[davisums]

The missing events must be the reason. Thanks for the example code! (And for the framework, big fan!)