+7 -10

src/morphlex.ts

··· 185 185 } 186 186 187 187 private visitAttributes([from, to]: PairOfMatchingElements<Element>): void { 188 188 - const fromAttrs = from.attributes 188 188 + if (from.hasAttribute("morphlex-dirty")) { 189 189 + from.removeAttribute("morphlex-dirty") 190 190 + } 189 191 190 192 // First pass: update/add attributes from reference (iterate forwards) 191 193 for (const { name, value } of to.attributes) { 192 192 - console.log(from, name) 193 193 - const oldValue = from.getAttribute(name) 194 194 - 195 195 - // This attribute was only added to trigger attribute morphing. 196 196 - if (name === "morphlex-dirty") { 197 197 - from.removeAttribute(name) 198 198 - continue 199 199 - } 200 200 - 201 194 if (name === "value") { 202 195 if (isInputElement(from) && from.value !== value) { 203 196 if (!this.options.preserveModified || from.value === from.defaultValue) { ··· 222 215 } 223 216 } 224 217 218 218 + const oldValue = from.getAttribute(name) 219 219 + 225 220 if (oldValue !== value && (this.options.beforeAttributeUpdated?.(from, name, value) ?? true)) { 226 221 from.setAttribute(name, value) 227 222 this.options.afterAttributeUpdated?.(from, name, oldValue) 228 223 } 229 224 } 225 225 + 226 226 + const fromAttrs = from.attributes 230 227 231 228 // Second pass: remove excess attributes (iterate backwards for efficiency) 232 229 for (let i = fromAttrs.length - 1; i >= 0; i--) {

+5 -5

test/morphlex-morphdom.test.ts

··· 115 115 116 116 morph(from, to) 117 117 118 118 - // Input values are no longer updated by morphlex 119 119 - expect((from as HTMLInputElement).value).toBe("Hello") 118 118 + // Input values are updated by default when not modified 119 119 + expect((from as HTMLInputElement).value).toBe("World") 120 120 }) 121 121 122 122 it("should add disabled attribute to input", () => { ··· 182 182 183 183 morph(from, to) 184 184 185 185 - // Selected options are no longer updated by morphlex 185 185 + // Selected options are updated by default when not modified 186 186 const select = from as HTMLSelectElement 187 187 - expect(select.value).toBe("1") 188 188 - expect(select.options[1].selected).toBe(false) 187 187 + expect(select.value).toBe("2") 188 188 + expect(select.options[1].selected).toBe(true) 189 189 }) 190 190 }) 191 191

+5 -4

test/morphlex.browser.test.ts

··· 601 601 602 602 morph(select, referenceSelect) 603 603 604 604 - // Selected attributes are no longer updated 605 605 - expect(select.selectedOptions.length).toBe(1) 604 604 + // Selected attributes are updated by default when not modified 605 605 + expect(select.selectedOptions.length).toBe(2) 606 606 expect(select.selectedOptions[0].value).toBe("2") 607 607 + expect(select.selectedOptions[1].value).toBe("3") 607 608 }) 608 609 609 610 it("should handle script tags safely", () => { ··· 688 689 morph(form, referenceForm) 689 690 690 691 const radioB = form.querySelector("#radio-b") as HTMLInputElement 691 691 - // Checked attribute is removed but not added - radioA loses its checked state 692 692 + // Checked attributes are updated by default when not modified 692 693 expect(radioA.checked).toBe(false) 693 693 - expect(radioB.checked).toBe(false) 694 694 + expect(radioB.checked).toBe(true) 694 695 }) 695 696 696 697 it("should handle contenteditable elements", () => {

+40

test/new.browser.test.ts

··· 1 1 + import { test, expect } from "vitest" 2 2 + import { morph } from "../src/morphlex" 3 3 + 4 4 + function parseHTML(html: string): HTMLElement { 5 5 + const tmp = document.createElement("div") 6 6 + tmp.innerHTML = html.trim() 7 7 + return tmp.firstChild as HTMLElement 8 8 + } 9 9 + 10 10 + test("morphing a modified input value with preserveModified enabled", () => { 11 11 + const a = parseHTML(`<input type="text" value="a">`) as HTMLInputElement 12 12 + const b = parseHTML(`<input type="text" value="b">`) as HTMLInputElement 13 13 + 14 14 + a.value = "new" 15 15 + morph(a, b, { preserveModified: true }) 16 16 + 17 17 + expect(a.outerHTML).toBe(`<input type="text" value="b">`) 18 18 + expect(a.value).toBe("new") 19 19 + }) 20 20 + 21 21 + test("morphing a modified input value preserveModified disabled", () => { 22 22 + const a = parseHTML(`<input type="text" value="a">`) as HTMLInputElement 23 23 + const b = parseHTML(`<input type="text" value="b">`) as HTMLInputElement 24 24 + 25 25 + a.value = "new" 26 26 + morph(a, b, { preserveModified: false }) 27 27 + 28 28 + expect(a.outerHTML).toBe(`<input type="text" value="b">`) 29 29 + expect(a.value).toBe("b") 30 30 + }) 31 31 + 32 32 + test("morphing an unmodified input value with preserveModified enabled", () => { 33 33 + const a = parseHTML(`<input type="text" value="a">`) as HTMLInputElement 34 34 + const b = parseHTML(`<input type="text" value="b">`) as HTMLInputElement 35 35 + 36 36 + morph(a, b, { preserveModified: true }) 37 37 + 38 38 + expect(a.outerHTML).toBe(`<input type="text" value="b">`) 39 39 + expect(a.value).toBe("b") 40 40 + })