Precise DOM morphing
morphing
typescript
dom
Always flag dirty inputs
This fixes an issue where defaultValues were not being morphed correctly.
+39
-1
+1
-1
src/morphlex.ts
+1
-1
src/morphlex.ts
···
160
160
export function morph(from: ChildNode, to: ChildNode | NodeListOf<ChildNode> | string, options: Options = {}): void {
161
161
if (typeof to === "string") to = parseFragment(to).childNodes
162
162
163
-
if (!options.preserveChanges && isParentNode(from)) flagDirtyInputs(from)
163
+
if (isParentNode(from)) flagDirtyInputs(from)
164
164
new Morph(options, getActiveElement(from, options)).morph(from, to)
165
165
}
166
166
+38
test/new/inputs.browser.test.ts
+38
test/new/inputs.browser.test.ts
···
34
34
expect(a.outerHTML).toBe(`<input type="text" value="b">`)
35
35
expect(a.value).toBe("b")
36
36
})
37
+
38
+
test("morphing a modified value across multiple preserveChanges morphs updates defaultValue", () => {
39
+
const input = dom(`<input type="text" value="a">`) as HTMLInputElement
40
+
const firstTarget = dom(`<input type="text" value="b">`) as HTMLInputElement
41
+
const secondTarget = dom(`<input type="text" value="c">`) as HTMLInputElement
42
+
43
+
input.value = "user one"
44
+
morph(input, firstTarget, { preserveChanges: true })
45
+
46
+
expect(input.value).toBe("user one")
47
+
expect(input.defaultValue).toBe("b")
48
+
expect(input.getAttribute("value")).toBe("b")
49
+
50
+
input.value = "user two"
51
+
morph(input, secondTarget, { preserveChanges: true })
52
+
53
+
expect(input.value).toBe("user two")
54
+
expect(input.defaultValue).toBe("c")
55
+
expect(input.getAttribute("value")).toBe("c")
56
+
})
57
+
58
+
test("morphing sibling inputs keeps modified value but updates the correct defaultValue", () => {
59
+
const from = dom(`<div><input type="text" name="n" value="a"><input type="text" name="n" value="a"></div>`) as HTMLElement
60
+
const to = dom(`<div><input type="text" name="n" value="b"><input type="text" name="n" value="a"></div>`) as HTMLElement
61
+
62
+
const first = from.children[0] as HTMLInputElement
63
+
const second = from.children[1] as HTMLInputElement
64
+
65
+
first.value = "user typed"
66
+
morph(from, to, { preserveChanges: true })
67
+
68
+
expect(first.value).toBe("user typed")
69
+
expect(first.defaultValue).toBe("b")
70
+
expect(first.getAttribute("value")).toBe("b")
71
+
expect(second.value).toBe("a")
72
+
expect(second.defaultValue).toBe("a")
73
+
expect(second.getAttribute("value")).toBe("a")
74
+
})
37
75
})
38
76
39
77
describe("checkbox", () => {