Merge pull request #7369 from QwikDev/v2-input-value-escaping

fix: don't escape value attribute

Author: wmertens

.changeset/afraid-garlics-greet.md

@@ -0,0 +1,5 @@
+---
+'@qwik.dev/core': patch
+---
+
+fix: don't escape value attribute

packages/qwik/src/core/client/vnode.ts

@@ -122,7 +122,6 @@ import { qwikDebugToString } from '../debug';
 import { assertDefined, assertEqual, assertFalse, assertTrue } from '../shared/error/assert';
 import { QError, qError } from '../shared/error/error';
 import { DEBUG_TYPE, QContainerValue, VirtualType, VirtualTypeName } from '../shared/types';
-import { escapeHTML } from '../shared/utils/character-escaping';
 import { isText } from '../shared/utils/element';
 import {
   ELEMENT_ID,
@@ -912,7 +911,7 @@ export const vnode_applyJournal = (journal: VNodeJournal) => {
         if (isBooleanAttr(element, key)) {
           (element as any)[key] = parseBoolean(value);
         } else if (key === 'value' && key in element) {
-          (element as any).value = escapeHTML(String(value));
+          (element as any).value = String(value);
         } else if (key === dangerouslySetInnerHTML) {
           (element as any).innerHTML = value!;
         } else {

packages/qwik/src/core/tests/component.spec.tsx

@@ -526,6 +526,54 @@ describe.each([
     }
   });
 
+  it('should not escape input value', async () => {
+    const Cmp = component$(() => {
+      const test = useSignal<string>();
+
+      return (
+        <div>
+          <input
+            type="text"
+            value={test.value}
+            onInput$={$((_, element) => {
+              test.value = element.value;
+            })}
+          />
+
+          <p>{test.value}</p>
+        </div>
+      );
+    });
+
+    const { vNode, document } = await render(<Cmp />, { debug });
+    expect(vNode).toMatchVDOM(
+      <Component ssr-required>
+        <div>
+          <input type="text" />
+          <p>
+            <Signal ssr-required></Signal>
+          </p>
+        </div>
+      </Component>
+    );
+
+    // simulate input
+    const input = document.querySelector('input')!;
+    input.value = "'";
+    await trigger(document.body, input, 'input');
+
+    expect(vNode).toMatchVDOM(
+      <Component ssr-required>
+        <div>
+          <input type="text" value="'" />
+          <p>
+            <Signal ssr-required>'</Signal>
+          </p>
+        </div>
+      </Component>
+    );
+  });
+
   it('should render correctly text node in the middle', async () => {
     const Cmp = component$(() => {
       const signal = useSignal<number>(0);