From a2dbc9f006d5ef7d5ca0adab3189253f3f667a44 Mon Sep 17 00:00:00 2001
From: Steffen Deusch <steffen@deusch.me>
Date: Thu, 10 Apr 2025 11:42:44 +0200
Subject: [PATCH] handle empty optgroups

Fixes https://github.com/phoenixframework/phoenix_live_view/issues/3742.

When a select contained an empty optgroup

<select>
    <optgroup label="optgroupabove">
        <option selected value="1">a</option>
        <option value="2">b</option>
        <option value="3">c</option>
    </optgroup>
    <optgroup label="optgroupempty"></optgroup>
    <optgroup label="optgroupbelow">
        <option value="4">d</option>
        <option value="5">e</option>
        <option value="6">f</option>
    </optgroup>
</select>

morphdom would stop when encountering the empty optgroup, not patching
the nodes below. This is fixed by skipping to the next sibling when an
optgroup does not have any children.
---
 src/specialElHandlers.js | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/src/specialElHandlers.js b/src/specialElHandlers.js
index 544efd6..ce213aa 100644
--- a/src/specialElHandlers.js
+++ b/src/specialElHandlers.js
@@ -88,6 +88,11 @@ export default {
                 if (nodeName === 'OPTGROUP') {
                     optgroup = curChild;
                     curChild = optgroup.firstChild;
+                    // handle empty optgroups
+                    if (!curChild) {
+                        curChild = optgroup.nextSibling;
+                        optgroup = null;
+                    }
                 } else {
                     if (nodeName === 'OPTION') {
                         if (curChild.hasAttribute('selected')) {