[Live] Fixing bug where the active input would maintain its value, bu…

…t lose its cursor position

This only affects "model" elements, as unmapped element changes are tracked and the "to"
element's value updated in the beforeNodeMorphed() callback.

Also, this setting matches Turbo 8.

src/LiveComponent/assets/dist/live_controller.js

@@ -1378,6 +1378,7 @@ function executeMorphdom(rootFromElement, rootToElement, modifiedFieldElements,
         syncAttributes(newElement, oldElement);
     });
     Idiomorph.morph(rootFromElement, rootToElement, {
+        ignoreActiveValue: true,
         callbacks: {
             beforeNodeMorphed: (fromEl, toEl) => {
                 if (!(fromEl instanceof Element) || !(toEl instanceof Element)) {

src/LiveComponent/assets/src/morphdom.ts

@@ -53,6 +53,12 @@ export function executeMorphdom(
     });
 
     Idiomorph.morph(rootFromElement, rootToElement, {
+        // We handle updating the value of fields that have been changed
+        // since the HTML was requested. However, the active element is
+        // a special case: replacing the value isn't enough. We need to
+        // prevent the value from being changed in the first place so the
+        // user's cursor position is maintained.
+        ignoreActiveValue: true,
         callbacks: {
             beforeNodeMorphed: (fromEl: Element, toEl: Element) => {
                 // Idiomorph loop also over Text node

src/LiveComponent/assets/test/controller/render.test.ts

@@ -149,6 +149,28 @@ describe('LiveController rendering Tests', () => {
         expect((test.element.querySelector('textarea') as HTMLTextAreaElement).value).toEqual('typing after the request starts');
     });
 
+    it('conserves cursor position of active model element', async () => {
+        const test = await createTest({ name: '' }, (data) => `
+            <div ${initComponent(data)}>
+                <input data-model="name" class="anything">
+            </div>
+        `);
+
+        test.expectsAjaxCall()
+            .expectUpdatedData({ name: 'Hello' })
+
+        const input = test.queryByDataModel('name') as HTMLInputElement;
+        userEvent.type(input, 'Hello');
+        userEvent.keyboard('{ArrowLeft}{ArrowLeft}');
+
+        await test.component.render();
+
+        // the cursor position should be preserved
+        expect(input.selectionStart).toBe(3);
+        userEvent.type(input, '!');
+        expect(input.value).toBe('Hel!lo');
+    });
+
     it('does not render over elements with data-live-ignore', async () => {
         const test = await createTest({ firstName: 'Ryan' }, (data: any) => `
             <div ${initComponent(data)}>