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

…inside clickable elements (weaverryan)

This PR was merged into the 2.x branch.

Discussion
----------

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

| Q             | A
| ------------- | ---
| Bug fix?      | yes
| New feature?  | no
| Tickets       | None
| License       | MIT

Small bug fix:

```
<a
    data-action="live#update"
    data-model="name"
    data-value="Dan"
><span>Change name to Dan</span></a>
```

In this case, the "click" would actually happen on the `span`, which is `event.target`. Switched to `event.currentTarget` to get the element that the listener is actually attached to (the `a`).

Cheers!

Commits
-------

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

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;

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) {

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 () => {