Precise DOM morphing
morphing
typescript
dom
Improve handling of input elements
+12
-8
+7
-5
dist/morphlex.js
+7
-5
dist/morphlex.js
···
56
56
for (const { name, value } of guide.attributes)
57
57
elem.getAttribute(name) === value || elem.setAttribute(name, value);
58
58
elem.nodeValue;
59
-
if (isInput(elem) && isInput(guide) && elem.type !== "file") {
60
-
if (elem.value !== guide.value)
61
-
elem.value = guide.value;
59
+
if (isInput(elem) && isInput(guide)) {
62
60
if (elem.checked !== guide.checked)
63
61
elem.checked = guide.checked;
64
62
if (elem.disabled !== guide.disabled)
65
63
elem.disabled = guide.disabled;
64
+
if (elem.indeterminate !== guide.indeterminate)
65
+
elem.indeterminate = guide.indeterminate;
66
+
if (elem.type !== "file" && elem.value !== guide.value)
67
+
elem.value = guide.value;
66
68
}
67
-
else if (isOption(elem) && isOption(guide) && elem.selected !== guide.selected)
68
-
elem.selected = guide.selected;
69
+
else if (isOption(elem) && isOption(guide) && elem.value !== guide.value)
70
+
elem.value = guide.value;
69
71
else if (isTextArea(elem) && isTextArea(guide)) {
70
72
if (elem.value !== guide.value)
71
73
elem.value = guide.value;
+5
-3
src/morphlex.ts
+5
-3
src/morphlex.ts
···
66
66
elem.nodeValue;
67
67
68
68
// For certain types of elements, we need to do some extra work to ensure the element’s state matches the guide’s state.
69
-
if (isInput(elem) && isInput(guide) && elem.type !== "file") {
70
-
if (elem.value !== guide.value) elem.value = guide.value;
69
+
if (isInput(elem) && isInput(guide)) {
71
70
if (elem.checked !== guide.checked) elem.checked = guide.checked;
72
71
if (elem.disabled !== guide.disabled) elem.disabled = guide.disabled;
73
-
} else if (isOption(elem) && isOption(guide) && elem.selected !== guide.selected) elem.selected = guide.selected;
72
+
if (elem.indeterminate !== guide.indeterminate) elem.indeterminate = guide.indeterminate;
73
+
if (elem.type !== "file" && elem.value !== guide.value) elem.value = guide.value;
74
+
} else if (isOption(elem) && isOption(guide) && elem.value !== guide.value) elem.value = guide.value;
74
75
else if (isTextArea(elem) && isTextArea(guide)) {
75
76
if (elem.value !== guide.value) elem.value = guide.value;
76
77
78
+
// TextAreas only have one child node and it’s always a text node, so we can safely cast here.
77
79
const text = elem.firstChild as Text | null;
78
80
if (text && text.textContent !== guide.value) text.textContent = guide.value;
79
81
}