[Live] Fixing bug where the active input would maintain its value, but lose its cursor position

Author: weaverryan

src/LiveComponent/assets/dist/live_controller.js

@@ -617,7 +617,7 @@ var Idiomorph = (function () {
          * @returns {boolean}
          */
         function ignoreValueOfActiveElement(possibleActiveElement, ctx) {
-            return ctx.ignoreActiveValue && possibleActiveElement === document.activeElement;
+            return ctx.ignoreActiveValue && possibleActiveElement === document.activeElement && possibleActiveElement !== document.body;
         }
 
         /**
@@ -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/package.json

@@ -27,7 +27,7 @@
         }
     },
     "dependencies": {
-        "idiomorph": "^0.3.0"
+        "idiomorph": "https://github.com/bigskysoftware/idiomorph.git"
     },
     "peerDependencies": {
         "@hotwired/stimulus": "^3.0.0"

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/model.test.ts

@@ -810,9 +810,9 @@ describe('LiveController data-model Tests', () => {
             <div ${initComponent(data)}>
                 <form data-model>
                     <textarea name="comment" data-testid="comment">${data.comment}</textarea>
-               </form>
+                </form>
 
-               <button data-action="live#$render">Reload</button>
+                <input data-testid="other-input">
            </div>
        `);
 
@@ -823,17 +823,18 @@ describe('LiveController data-model Tests', () => {
             // delay slightly so we can type in the textarea
             .delayResponse(10);
 
-        getByText(test.element, 'Reload').click();
+        const renderPromise = test.component.render();
         // mimic changing the field, but without (yet) triggering the change event
         const commentField = getByTestId(test.element, 'comment');
-        if (!(commentField instanceof HTMLTextAreaElement)) {
-            throw new Error('wrong type');
-        }
+        const inputField = getByTestId(test.element, 'other-input');
         userEvent.type(commentField, ' ftw!');
+        // To make the test more robust, make the textarea NOT the active element.
+        // The active element's value is ignored during morphing. Here, we want
+        // to test that even if the morph system *does* want to update the value
+        // of the textarea, the value will be kept.
+        userEvent.type(inputField, 'making this element active');
 
-        // wait for loading start and end
-        await waitFor(() => expect(test.element).toHaveAttribute('busy'));
-        await waitFor(() => expect(test.element).not.toHaveAttribute('busy'));
+        await renderPromise;
 
         expect(commentField).toHaveValue('Live components ftw!');
 
@@ -845,10 +846,7 @@ describe('LiveController data-model Tests', () => {
                 data.comment = 'server changed comment';
             });
 
-        getByText(test.element, 'Reload').click();
-        // wait for loading start and end
-        await waitFor(() => expect(test.element).toHaveAttribute('busy'));
-        await waitFor(() => expect(test.element).not.toHaveAttribute('busy'));
+        await test.component.render();
 
         expect(commentField).toHaveValue('server changed comment');
     });

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