[Live] Fixing bug with data-action="live#update" and inside clickable…

… elements
fracsi · Jun 15, 2023 · 9a5c60b · 9a5c60b
1 parent b1aba24
commit 9a5c60b
Show file tree

Hide file tree

Showing 3 changed files with 23 additions and 5 deletions.
diff --git a/src/LiveComponent/assets/dist/live_controller.js b/src/LiveComponent/assets/dist/live_controller.js
@@ -2697,9 +2697,9 @@ class LiveControllerDefault extends Controller {
     }
     update(event) {
         if (event.type === 'input' || event.type === 'change') {
-            throw new Error(`Since LiveComponents 2.3, you no longer need data-action="live#update" on form elements. Found on element: ${getElementAsTagText(event.target)}`);
+            throw new Error(`Since LiveComponents 2.3, you no longer need data-action="live#update" on form elements. Found on element: ${getElementAsTagText(event.currentTarget)}`);
         }
-        this.updateModelFromElementEvent(event.target, null);
+        this.updateModelFromElementEvent(event.currentTarget, null);
     }
     action(event) {
         const rawAction = event.currentTarget.dataset.actionName;

diff --git a/src/LiveComponent/assets/src/live_controller.ts b/src/LiveComponent/assets/src/live_controller.ts
@@ -138,12 +138,12 @@ export default class LiveControllerDefault extends Controller<HTMLElement> imple
         if (event.type === 'input' || event.type === 'change') {
             throw new Error(
                 `Since LiveComponents 2.3, you no longer need data-action="live#update" on form elements. Found on element: ${getElementAsTagText(
-                    event.target
+                    event.currentTarget
                 )}`
             );
         }
 
-        this.updateModelFromElementEvent(event.target, null);
+        this.updateModelFromElementEvent(event.currentTarget, null);
     }
 
     action(event: any) {

diff --git a/src/LiveComponent/assets/test/controller/model.test.ts b/src/LiveComponent/assets/test/controller/model.test.ts
@@ -109,7 +109,17 @@ describe('LiveController data-model Tests', () => {
     it('renders correctly with data-value and live#update on a non-input', async () => {
         const test = await createTest({ name: 'Ryan' }, (data: any) => `
             <div ${initComponent(data)}>
-                <a data-action="live#update" data-model="name" data-value="Jan">Change name to Jan</a>
+                <a
+                    data-action="live#update"
+                    data-model="name"
+                    data-value="Jan"
+                >Change name to Jan</a>
+
+                <a
+                    data-action="live#update"
+                    data-model="name"
+                    data-value="Dan"
+                ><span>Change name to Dan</span></a>
                 
                 Name is: ${data.name}
             </div>
@@ -122,6 +132,14 @@ describe('LiveController data-model Tests', () => {
 
         await waitFor(() => expect(test.element).toHaveTextContent('Name is: Jan'));
         expect(test.component.valueStore.getOriginalProps()).toEqual({name: 'Jan'});
+
+        test.expectsAjaxCall()
+            .expectUpdatedData({ name: 'Dan' });
+
+        userEvent.click(getByText(test.element, 'Change name to Dan'));
+
+        await waitFor(() => expect(test.element).toHaveTextContent('Name is: Dan'));
+        expect(test.component.valueStore.getOriginalProps()).toEqual({name: 'Dan'});
     });
 
     it('falls back to using the name attribute when no data-model is present and <form data-model> is ancestor', async () => {