diff --git a/src/LiveComponent/assets/dist/live_controller.js b/src/LiveComponent/assets/dist/live_controller.js index c829bcc576d..06ee0e11c32 100644 --- 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 index 23750c1f5e2..8c7ebcf4f38 100644 --- 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 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 index a68f8607351..ca31e38ed51 100644 --- 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) => `
- Change name to Jan + Change name to Jan + + Change name to Dan Name is: ${data.name}
@@ -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
is ancestor', async () => {