In 3.10.2 x-if and @click.away behave differently than 2.3.0 #2877

hugoalvarado · 2022-04-26T04:19:05Z

hugoalvarado
Apr 26, 2022

Hello,

I noticed that in 3.10.2 the click away modifier is triggered when clicking the element itself.
In 2.x the click away modifier is triggered only when clicking outside the template. This combined with x-if is resulting in odd behavior.

In my case I use x-if with a flag to show a menu and then @click.away to hide it.
A button toggles the flag, showing the menu, and then the menu hides itself when the user clicks outside. This does not work in 3.10.

I have examples below where the only difference is the alpine versions

With Alpinejs 2.3.0: https://jsfiddle.net/Lsxb13t5/4/
With Alpinejs 3.10.2: https://jsfiddle.net/Lsxb13t5/5/

Code from jsfiddle:

<html x-data="data()">

<head>
<script defer src="https://cdnjs.cloudflare.com/ajax/libs/alpinejs/2.3.0/alpine.js"></script>
</head>

<body>

<template x-if="showit">
<div @click.away="hideit">Hello</div>
</template>

<div @click="toggleit">Click me</div>

</body>
</html>

function data() {
  return {
    showit:false, 
    toggleit(){
    console.log("toggleit")
      this.showit = !this.showit
    },
    hideit(){
      console.log("hideit")
      this.showit = false
    }
  }
}

ekwoka · 2022-04-30T08:43:32Z

ekwoka
Apr 30, 2022

This is between v2 and v3.

The correct event, in v3 is to use click.outside not click.away. In v2, this caused a race condition which would often break, but v3 properly handles this.

0 replies

SimoTod · 2022-04-30T14:35:44Z

SimoTod
Apr 30, 2022
Collaborator

I think x-if is not compatible with click.outside (or click.away) in V3. You can either use x-show instead of x-if or<div @click.stop="toggleit">Click me</div>.

0 replies

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Uh oh!

In 3.10.2 x-if and @click.away behave differently than 2.3.0 #2877

Uh oh!

{{title}}

Uh oh!

Replies: 2 comments

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Select a reply

Uh oh!

Uh oh!

In 3.10.2 x-if and @click.away behave differently than 2.3.0 #2877

Uh oh!

hugoalvarado Apr 26, 2022

Replies: 2 comments

Uh oh!

ekwoka Apr 30, 2022

Uh oh!

SimoTod Apr 30, 2022 Collaborator

hugoalvarado
Apr 26, 2022

ekwoka
Apr 30, 2022

SimoTod
Apr 30, 2022
Collaborator