I think I found a bug with @click.away (alpine) and wire:model

#1

What seems to be the problem:
I’m following the instructions here for “Forwarding wire:model input Events”: https://laravel-livewire.com/docs/alpine-js

And it is not working properly for @click.away. Or at least I think so.

Steps to Reproduce:

I’ve peared it down to a simple example:

           <h1>{{ var_dump($foo) }}</h1>
            <div wire:model="foo" >
                   <div x-data @click.away="$dispatch('input', false); console.log('away')">
                       <button  @click="$dispatch('input', true)">true</button>
                       <button  @click="$dispatch('input', false)">false</button>
                   </div>
            </div>

The 2 buttons work as expected and change the “foo” property. The problem is the “click.away” functionality does NOT update the foo property. I can see the console log messages for “away” so I now the event is firing properly. It seems to me that $dispatch(‘input’, false) does not work properly for “click.away” specifically

Are you using the latest version of Livewire: yes

Do you have any screenshots or code examples: see above

EDIT: I’ve opened an issue on Github: https://github.com/livewire/livewire/issues/1201

#2

I tried it out and $dispatch('input', xxx) does not set the model as you’ve mentioned. I don’t have any time to drill down why but I did find that @click.away works with @this.set.

You can do <div x-data @click.away="@this.set('foo', false)"> and that should work.

Again, not sure why $dispatch isn’t working in conjunction with @click.away. It might be more of an Alpine issue than a livewire issue.

#3

yea sounds good. I went ahead and filed an issue on github, so it can be logged. Thanks for confirming for me (and giving me an alternative).