fix: input's value is string when passing number on V1 (#7249)

* fix: a bug related to 7182, migrate the code

---------

Co-authored-by: wuls <[email protected]>

Author: JerryWu1234

.changeset/witty-radios-pump.md

@@ -0,0 +1,5 @@
+---
+'@builder.io/qwik': patch
+---
+
+fix: input's value is string when passing number

packages/docs/src/routes/docs/(qwik)/components/rendering/index.mdx

@@ -180,11 +180,17 @@ The `bind:` is compiled away by the Qwik optimizer to a property set and an even
 import { component$, useSignal } from '@builder.io/qwik';
 
 export default component$(() => {
+  const count = useSignal(0);
   const firstName = useSignal('');
   const acceptConditions = useSignal(false);
 
   return (
     <form>
+     {/* For number inputs, use `valueAsNumber` instead of `value` to get the numeric value directly */}
+      <input type="number"
+        value={count.value}
+        onInput$={(_, el) => count.value = el.valueAsNumber }
+      />
       <input type="text"
         value={firstName.value}
         onInput$={(_, el) => firstName.value = el.value }

packages/qwik/src/core/render/jsx/types/jsx-generated.ts

@@ -596,7 +596,7 @@ type SpecialAttrs = {
      * For type: HTMLInputTypeAttribute, excluding 'button' | 'reset' | 'submit' | 'checkbox' |
      * 'radio'
      */
-    'bind:value'?: Signal<string | undefined>;
+    'bind:value'?: Signal<string | undefined | number>;
     enterKeyHint?: 'enter' | 'done' | 'go' | 'next' | 'previous' | 'search' | 'send' | undefined;
     height?: Size | undefined;
     max?: number | string | undefined;

packages/qwik/src/optimizer/core/src/snapshots/qwik_core__test__example_input_bind.snap

@@ -44,7 +44,7 @@ export const Greeter = /*#__PURE__*/ componentQrl(/*#__PURE__*/ inlinedQrl(()=>{
                 "value": value,
                 "onInput$": /*#__PURE__*/ inlinedQrl((_, elm)=>{
                     const [value] = useLexicalScope();
-                    return value.value = elm.value;
+                    return value.value = elm.type == "number" ? elm.valueAsNumber : elm.value;
                 }, "s_6IZeYpXCNXA", [
                     value
                 ])
@@ -53,7 +53,7 @@ export const Greeter = /*#__PURE__*/ componentQrl(/*#__PURE__*/ inlinedQrl(()=>{
                 "checked": checked,
                 "onInput$": /*#__PURE__*/ inlinedQrl((_, elm)=>{
                     const [checked] = useLexicalScope();
-                    return checked.value = elm.checked;
+                    return checked.value = elm.type == "number" ? elm.valueAsNumber : elm.checked;
                 }, "s_JPI3bLCVnso", [
                     checked
                 ])
@@ -62,7 +62,7 @@ export const Greeter = /*#__PURE__*/ componentQrl(/*#__PURE__*/ inlinedQrl(()=>{
                 "stuff": stuff,
                 "onChange$": /*#__PURE__*/ inlinedQrl((_, elm)=>{
                     const [stuff] = useLexicalScope();
-                    return stuff.value = elm.stuff;
+                    return stuff.value = elm.type == "number" ? elm.valueAsNumber : elm.stuff;
                 }, "s_eyREJ0lZTFw", [
                     stuff
                 ])

packages/qwik/src/optimizer/core/src/transform.rs

@@ -1298,17 +1298,59 @@ impl<'a> QwikTransform<'a> {
 													),
 												),
 												op: ast::AssignOp::Assign,
-												right: Box::new(ast::Expr::Member(
-													ast::MemberExpr {
-														obj: Box::new(ast::Expr::Ident(elm)),
-														prop: ast::MemberProp::Ident(
-															ast::IdentName::new(
-																prop_name, DUMMY_SP,
-															),
-														),
+												right: Box::new(ast::Expr::Cond(ast::CondExpr {
+													test: Box::new(ast::Expr::Bin(ast::BinExpr {
+														left: Box::new(ast::Expr::Member(
+															ast::MemberExpr {
+																obj: Box::new(ast::Expr::Ident(
+																	elm.clone(),
+																)),
+																prop: ast::MemberProp::Ident(
+																	ast::IdentName::new(
+																		"type".into(),
+																		DUMMY_SP,
+																	),
+																),
+																span: DUMMY_SP,
+															},
+														)),
 														span: DUMMY_SP,
-													},
-												)),
+														op: ast::BinaryOp::EqEq,
+														right: Box::new(ast::Expr::Lit(
+															ast::Lit::Str(ast::Str {
+																value: "number".into(),
+																span: DUMMY_SP,
+																raw: None,
+															}),
+														)),
+													})),
+													cons: Box::new(ast::Expr::Member(
+														ast::MemberExpr {
+															obj: Box::new(ast::Expr::Ident(
+																elm.clone(),
+															)),
+															prop: ast::MemberProp::Ident(
+																ast::IdentName::new(
+																	"valueAsNumber".into(),
+																	DUMMY_SP,
+																),
+															),
+															span: DUMMY_SP,
+														},
+													)),
+													alt: Box::new(ast::Expr::Member(
+														ast::MemberExpr {
+															obj: Box::new(ast::Expr::Ident(elm)),
+															prop: ast::MemberProp::Ident(
+																ast::IdentName::new(
+																	prop_name, DUMMY_SP,
+																),
+															),
+															span: DUMMY_SP,
+														},
+													)),
+													span: DUMMY_SP,
+												})),
 												span: DUMMY_SP,
 											}),
 										))),

starters/apps/qwikcity-test/src/routes/issue7182/index.tsx

@@ -0,0 +1,13 @@
+import { component$, useSignal } from "@builder.io/qwik";
+export default component$(() => {
+  const a = useSignal(1);
+  const b = useSignal(2);
+
+  return (
+    <div>
+      {a.value} + {b.value} = <span id="result">{a.value + b.value}</span>
+      <input type="number" id="input1" bind:value={a} />
+      <input type="number" id="input2" bind:value={b} />
+    </div>
+  );
+});

starters/e2e/qwikcity/nav.spec.ts

@@ -432,6 +432,22 @@ test.describe("actions", () => {
       await expect(href).toHaveAttribute("href", site);
     });
 
+    test("issue7182", async ({ page, javaScriptEnabled }) => {
+      await page.goto("/qwikcity-test/issue7182");
+      const input1 = await page.locator("#input1");
+      await input1.fill("4");
+      await input1.dispatchEvent("change");
+      const input2 = await page.locator("#input2");
+      await input2.fill("4");
+      await input2.dispatchEvent("change");
+      const result = await page.locator("#result");
+      if (javaScriptEnabled) {
+        await expect(result).toHaveText("8");
+      } else {
+        await expect(result).toHaveText("3");
+      }
+    });
+
     test("media in home page", async ({ page }) => {
       await page.goto("/qwikcity-test/");