Fix option tag synchronization

Author: dsoriano

src/LiveComponent/assets/dist/live_controller.js

@@ -1237,7 +1237,7 @@ function executeMorphdom(rootFromElement, rootToElement, modifiedFieldElements,
                 if (elementChanges) {
                     elementChanges.applyToElement(toEl);
                 }
-                if (fromEl.isEqualNode(toEl)) {
+                if (fromEl.nodeName.toUpperCase() !== 'OPTION' && fromEl.isEqualNode(toEl)) {
                     const normalizedFromEl = cloneHTMLElement(fromEl);
                     normalizeAttributesForComparison(normalizedFromEl);
                     const normalizedToEl = cloneHTMLElement(toEl);

src/LiveComponent/assets/src/morphdom.ts

@@ -84,7 +84,7 @@ export function executeMorphdom(
                 }
 
                 // https://github.com/patrick-steele-idem/morphdom#can-i-make-morphdom-blaze-through-the-dom-tree-even-faster-yes
-                if (fromEl.isEqualNode(toEl)) {
+                if (fromEl.nodeName.toUpperCase() !== 'OPTION' && fromEl.isEqualNode(toEl)) {
                     // the nodes are equal, but the "value" on some might differ
                     // lets try to quickly compare a bit more deeply
                     const normalizedFromEl = cloneHTMLElement(fromEl);

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

@@ -388,4 +388,58 @@ describe('LiveController rendering Tests', () => {
         // verify the component *did* render ok
         expect(test.element).toHaveTextContent('The season is: autumn');
     });
+
+    it('select the placeholder option tag after render', async () => {
+        const test = await createTest({}, (data: any) => `
+            <div ${initComponent(data)}>
+                <form>
+                    <select id="select_option_1">
+                        <option value="">Choose option 1</option>
+                        <option value="1">One</option>
+                        <option value="2">Two</option>
+                        <option value="3">Three</option>
+                    </select>
+                    
+                    <select id="select_option_2">
+                        <option value="">Choose option 2</option>
+                        <option value="1_1">One - One</option>
+                        <option value="1_2">One - Two</option>
+                        <option value="2_1">Two - One</option>
+                        <option value="2_2">Two - Two</option>
+                        <option value="3_1">Three - One</option>
+                        <option value="3_2">Three - Two</option>
+                    </select>
+                </form>
+            </div>
+        `);
+
+        test.expectsAjaxCall()
+            .willReturn((data) => `
+                <div ${initComponent(data)}>
+                    <form>
+                        <select id="select_option_1">
+                            <option value="">Choose option 1</option>
+                            <option value="1">One</option>
+                            <option value="2" selected>Two</option>
+                            <option value="3">Three</option>
+                        </select>
+                        
+                        <select id="select_option_2">
+                            <option value="">Choose option 2</option>
+                            <option value="2_1">Two - One</option>
+                            <option value="2_2">Two - Two</option>
+                        </select>
+                    </form>
+                </div>
+            `);
+
+        await test.component.render();
+        const selectOption2 = test.element.querySelector('#select_option_2') as HTMLSelectElement;
+
+        // verify the placeholder of the select option 2 is selected
+        expect(selectOption2.children[0].hasAttribute('selected')).toBe(true);
+
+        // verify the selectedIndex of the select option 2 is 0
+        expect(selectOption2.selectedIndex).toBe(0);
+    });
 });