feature #1290 [Autocomplete] Attempting a simpler "reset" of items (weaverryan)

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

Discussion
----------

[Autocomplete] Attempting a simpler "reset" of items

| Q             | A
| ------------- | ---
| Bug fix?      | yes
| New feature?  | no
| Issues        | Possibly #1290 (need to check and remove data-live-ignore), fixes #1261 possibly #1241 possibly #909
| License       | MIT

Tomselect is a real pain in the butt. When you select an option, it re-orders the `option` elements and uses the elements themselves internally to remember which one is selected. It plays poorly with LiveComponents, which is why we added the MutationObserver logic. However, at least in one straightforward case that I had today, when you selected a new item, the new value was being lost. This will only get worse when Turbo 8 adds morphing.

This PR attempts to simplify: when needed, completely destroy TomSelect and recreate it. It seems to work well, but 2 tests are failing. And I'm pulling my hair out - so it may not even be fixable. No matter what I try, when I reinitialize TomSelect on a set of HTML that has been reordered, it gets confused. It's as if it has a static cache somewhere that I can't find...

Commits
-------

af20ad8a [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
 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~