bug #1501 [Live] Fixing bug where the active input would maintain its value, but lose its cursor position (weaverryan)

This PR was squashed before being merged into the 2.x branch.

Discussion
----------

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

| Q             | A
| ------------- | ---
| Bug fix?      | yes
| New feature?  | no
| Issues        | Fix #1490
| License       | MIT

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. This also updates Idiomorph to the absolute latest version, which includes a related bug fix.

Cheers!

Commits
-------

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