[Autocomplete] Attempting a simpler "reset" of items

Author: weaverryan

assets/dist/live_controller.js

@@ -1264,6 +1264,13 @@ function executeMorphdom(rootFromElement, rootToElement, modifiedFieldElements,
                     fromEl.removeAttribute('parent-live-id-changed');
                     return true;
                 }
+                if (fromEl.hasAttribute('data-skip-morph')) {
+                    fromEl.innerHTML = toEl.innerHTML;
+                    return true;
+                }
+                if (fromEl.parentElement && fromEl.parentElement.hasAttribute('data-skip-morph')) {
+                    return false;
+                }
                 return !fromEl.hasAttribute('data-live-ignore');
             },
             beforeNodeRemoved(node) {

assets/src/morphdom.ts

@@ -112,11 +112,21 @@ export function executeMorphdom(
                     return true;
                 }
 
+                if (fromEl.hasAttribute('data-skip-morph')) {
+                    fromEl.innerHTML = toEl.innerHTML;
+
+                    return true;
+                }
+
+                if (fromEl.parentElement && fromEl.parentElement.hasAttribute('data-skip-morph')) {
+                    return false;
+                }
+
                 // look for data-live-ignore, and don't update
                 return !fromEl.hasAttribute('data-live-ignore');
             },
 
-            beforeNodeRemoved(node) {
+            beforeNodeRemoved(node: Node) {
                 if (!(node instanceof HTMLElement)) {
                     // text element
                     return true;

assets/test/controller/render.test.ts

@@ -10,7 +10,7 @@
 'use strict';
 
 import { shutdownTests, createTest, initComponent } from '../tools';
-import { getByText, waitFor } from '@testing-library/dom';
+import { getByTestId, getByText, waitFor } from '@testing-library/dom';
 import userEvent from '@testing-library/user-event';
 import { htmlToElement } from '../../src/dom_utils';
 
@@ -208,6 +208,41 @@ describe('LiveController rendering Tests', () => {
         expect(ignoreElement?.outerHTML).toEqual('<div data-live-ignore="">Inside Ignore Name: <span>Kevin</span></div>');
     });
 
+    it('overwrites HTML instead of morph with data-skip-morph', async () => {
+        const test = await createTest({ firstName: 'Ryan' }, (data: any) => `
+            <div ${initComponent(data)}>
+                <div data-skip-morph data-name="${data.firstName}">Inside Skip Name: <span data-testid="inside-skip-morph">${data.firstName}</span></div>
+
+                Outside Skip Name: ${data.firstName}
+
+                <button data-action="live#$render">Reload</button>
+            </div>
+        `);
+
+        const spanBefore = getByTestId(test.element, 'inside-skip-morph');
+        expect(spanBefore).toHaveTextContent('Ryan');
+
+        test.expectsAjaxCall()
+            .serverWillChangeProps((data: any) => {
+                // change the data on the server so the template renders differently
+                data.firstName = 'Kevin';
+            });
+
+        getByText(test.element, 'Reload').click();
+
+        await waitFor(() => expect(test.element).toHaveTextContent('Outside Skip Name: Kevin'));
+        // make sure the outer element is still updated
+        const skipElement = test.element.querySelector('div[data-skip-morph]');
+        if (!(skipElement instanceof HTMLElement)) {
+            throw new Error('skipElement is not an HTMLElement');
+        }
+        expect(skipElement.dataset.name).toEqual('Kevin');
+        const spanAfter = getByTestId(test.element, 'inside-skip-morph');
+        expect(spanAfter).toHaveTextContent('Kevin');
+        // but it is not just a mutation of the original element
+        expect(spanAfter).not.toBe(spanBefore);
+    });
+
     it('cancels a re-render if the page is navigating away', async () => {
         const test = await createTest({greeting: 'aloha!'}, (data: any) => `
             <div ${initComponent(data)}>${data.greeting}</div>

doc/index.rst

@@ -3243,6 +3243,23 @@ an element, that changes is preserved (see :ref:`smart-rerender-algorithm`).
     ``data-live-id`` attribute. During a re-render, if this value changes, all
     of the children of the element will be re-rendered, even those with ``data-live-ignore``.
 
+Overwrite HTML Instead of Morphing
+~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
+
+Normally, when a component re-renders, the new HTML is "morphed" onto the existing
+elements on the page. In some rare cases, you may want to simply overwrite the existing
+inner HTML of an element with the new HTML instead of morphing it. This can be done by adding a
+``data-skip-morph`` attribute:
+
+.. code-block:: html
+
+    <select data-skip-morph>
+        <option>...</option>
+    </select>
+
+In this case, any changes to the ``<select>`` element attributes will still be
+"morphed" onto the existing element, but the inner HTML will be overwritten.
+
 Define another route for your Component
 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~