Merge pull request #162 from SimoTod/feature/event-return-value

Prevent default action when an event handler returns false

src/component.js

@@ -242,7 +242,7 @@ export default class Component {
     }
 
     evaluateCommandExpression(el, expression, extraVars = () => {}) {
-        saferEvalNoReturn(expression, this.$data, {
+        return saferEvalNoReturn(expression, this.$data, {
             ...extraVars(),
             $dispatch: this.getDispatchFunction(el),
         })

src/directives/on.js

@@ -34,7 +34,11 @@ export function registerListener(component, el, event, modifiers, expression, ex
             if (modifiers.includes('prevent')) e.preventDefault()
             if (modifiers.includes('stop')) e.stopPropagation()
 
-            runListenerHandler(component, expression, e, extraVars)
+            const returnValue = runListenerHandler(component, expression, e, extraVars)
+
+            if (returnValue === false) {
+                e.preventDefault()
+            }
 
             if (modifiers.includes('once')) {
                 listenerTarget.removeEventListener(event, handler)
@@ -46,7 +50,7 @@ export function registerListener(component, el, event, modifiers, expression, ex
 }
 
 function runListenerHandler(component, expression, e, extraVars) {
-    component.evaluateCommandExpression(e.target, expression, () => {
+    return component.evaluateCommandExpression(e.target, expression, () => {
         return {...extraVars(), '$event': e}
     })
 }

test/on.spec.js

@@ -299,3 +299,28 @@ test('event with colon', async () => {
 
     await wait(() => { expect(document.querySelector('span').getAttribute('foo')).toEqual('baz') })
 })
+
+
+test('prevent default action when an event returns false', async () => {
+    window.confirm = jest.fn().mockImplementation(() => false)
+
+    document.body.innerHTML = `
+        <div x-data="{}">
+            <input type="checkbox" x-on:click="return confirm('are you sure?')">
+        </div>
+    `
+
+    Alpine.start()
+
+    expect(document.querySelector('input').checked).toEqual(false)
+
+    document.querySelector('input').click()
+
+    expect(document.querySelector('input').checked).toEqual(false)
+
+    window.confirm = jest.fn().mockImplementation(() => true)
+
+    document.querySelector('input').click()
+
+    expect(document.querySelector('input').checked).toEqual(true)
+})