From 01661997d4ab5e1c22c41e2670fdbb05f52efed3 Mon Sep 17 00:00:00 2001
From: Varixo <admin@varixo.pl>
Date: Thu, 26 Dec 2024 19:08:37 +0100
Subject: [PATCH] fix: updating signal-based var props

Co-authored-by: Steff <steffanek@users.noreply.github.com>
---
 .changeset/brown-ravens-behave.md             |  5 ++
 packages/qwik/src/core/client/vnode-diff.ts   |  8 ++-
 .../qwik/src/core/tests/attributes.spec.tsx   | 49 ++++++++++++++++++-
 3 files changed, 59 insertions(+), 3 deletions(-)
 create mode 100644 .changeset/brown-ravens-behave.md

diff --git a/.changeset/brown-ravens-behave.md b/.changeset/brown-ravens-behave.md
new file mode 100644
index 00000000000..2753f83f5e3
--- /dev/null
+++ b/.changeset/brown-ravens-behave.md
@@ -0,0 +1,5 @@
+---
+'@qwik.dev/core': patch
+---
+
+fix: updating signal-based props
diff --git a/packages/qwik/src/core/client/vnode-diff.ts b/packages/qwik/src/core/client/vnode-diff.ts
index d7565a4b622..7f70be7302c 100644
--- a/packages/qwik/src/core/client/vnode-diff.ts
+++ b/packages/qwik/src/core/client/vnode-diff.ts
@@ -14,7 +14,7 @@ import { Slot } from '../shared/jsx/slot.public';
 import type { JSXNodeInternal, JSXOutput } from '../shared/jsx/types/jsx-node';
 import type { JSXChildren } from '../shared/jsx/types/jsx-qwik-attributes';
 import { SSRComment, SSRRaw, SkipRender } from '../shared/jsx/utils.public';
-import { trackSignalAndAssignHost, untrack } from '../use/use-core';
+import { trackSignalAndAssignHost } from '../use/use-core';
 import { TaskFlags, cleanupTask, isTask } from '../use/use-task';
 import { EMPTY_OBJ } from '../shared/utils/flyweight';
 import {
@@ -788,7 +788,11 @@ export const vnode_diff = (
       }
 
       if (isSignal(value)) {
-        value = untrack(() => value.value);
+        const signalData = new EffectPropData({
+          $scopedStyleIdPrefix$: scopedStyleIdPrefix,
+          $isConst$: false,
+        });
+        value = trackSignalAndAssignHost(value, vnode, key, container, signalData);
       }
 
       vnode_setAttr(journal, vnode, key, value);
diff --git a/packages/qwik/src/core/tests/attributes.spec.tsx b/packages/qwik/src/core/tests/attributes.spec.tsx
index 07dfc480fb9..1d1033b94cd 100644
--- a/packages/qwik/src/core/tests/attributes.spec.tsx
+++ b/packages/qwik/src/core/tests/attributes.spec.tsx
@@ -1,6 +1,14 @@
 import { domRender, ssrRenderToDom, trigger } from '@qwik.dev/core/testing';
 import { describe, expect, it } from 'vitest';
-import { component$, useSignal, useStore, Fragment as Component, Fragment } from '@qwik.dev/core';
+import {
+  component$,
+  useSignal,
+  useStore,
+  Fragment as Component,
+  Fragment,
+  type PropsOf,
+  useComputed$,
+} from '@qwik.dev/core';
 
 const debug = false; //true;
 Error.stackTraceLimit = 100;
@@ -302,4 +310,43 @@ describe.each([
       </Component>
     );
   });
+
+  it('should update signal-based var prop', async () => {
+    const PasswordInput = component$<PropsOf<'input'>>((props) => {
+      const showPassword = useSignal<boolean>(false);
+      const inputType = useComputed$(() => (showPassword.value ? 'text' : 'password'));
+      return (
+        <>
+          <input type={inputType.value} {...props} />
+          <button
+            onClick$={() => {
+              showPassword.value = !showPassword.value;
+            }}
+          ></button>
+        </>
+      );
+    });
+
+    const { vNode, document } = await render(<PasswordInput />, { debug });
+
+    expect(vNode).toMatchVDOM(
+      <Component>
+        <Fragment>
+          <input type="password" />
+          <button></button>
+        </Fragment>
+      </Component>
+    );
+
+    await trigger(document.body, 'button', 'click');
+
+    expect(vNode).toMatchVDOM(
+      <Component>
+        <Fragment>
+          <input type="text" />
+          <button></button>
+        </Fragment>
+      </Component>
+    );
+  });
 });