@click.away for the tabs example - Does not work

[jenstornell]

https://jsfiddle.net/xqpwu9Le/

I'm a newbie with Alpine. I use the tabs example and it has worked out well so far but I don't get how the @click.away part work.

I guess it's a really simple mistake?

html

<div x-data="{ tab: 'foo' }" @click.away="tab: false">
    <button :class="{ 'active': tab === 'foo' }" @click="tab = 'foo'">Foo</button>
    <button :class="{ 'active': tab === 'bar' }" @click="tab = 'bar'">Bar</button>

    <div x-show="tab === 'foo'">Tab Foo</div>
    <div x-show="tab === 'bar'">Tab Bar</div>
</div>

css

.active {
  background: red;
}

Expected results

If I click outside the tab area or in a place where there is no tab, the open tab closes.

[HugoDF]

Your expression in the click away handler is not assigning a new value, should be @click.away="tab = false"