fix(styled input): make one way and two way data binding work

Author: maiieul

apps/website/src/routes/docs/styled/input/examples/data-binding.tsx

@@ -0,0 +1,13 @@
+import { component$, useSignal } from '@builder.io/qwik';
+import { Input, Label } from '~/components/ui';
+
+export default component$(() => {
+  const valueSig = useSignal('[email protected]');
+  return (
+    <div class="grid w-full max-w-sm items-center gap-1.5">
+      <Label for="email-2">Email</Label>
+      <Input type="email" id="email-2" placeholder="Email" bind:value={valueSig} />
+      <p class="text-sm text-muted-foreground">Your email is: {valueSig.value}</p>
+    </div>
+  );
+});

apps/website/src/routes/docs/styled/input/examples/hero.tsx

@@ -4,7 +4,7 @@ import { Input } from '~/components/ui';
 export default component$(() => {
   return (
     <>
-      <Input type="email" placeholder="Email" value="[email protected]" />
+      <Input type="email" placeholder="Email" />
     </>
   );
 });

apps/website/src/routes/docs/styled/input/index.mdx

@@ -92,3 +92,7 @@ import { Input } from '~/components/ui';
 ### With text
 
 <Showcase name="with-text" vertical />
+
+### Data-binding
+
+<Showcase name="data-binding" vertical />

packages/kit-styled/src/components/input/input.tsx

@@ -1,34 +1,24 @@
-import { component$, useSignal, type PropsOf } from '@builder.io/qwik';
+import { $, component$, useSignal, type PropsOf } from '@builder.io/qwik';
 import { cn } from '@qwik-ui/utils';
 
 type InputProps = PropsOf<'input'> & {
   error?: string;
 };
 
 export const Input = component$<InputProps>(
-  ({
-    name,
-    error,
-    'bind:value': valueSig,
-    value,
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    'bind:checked': checkedSig,
-    id,
-    ...props
-  }) => {
+  ({ name, error, id, ['bind:value']: valueSig, value, onInput$, ...props }) => {
     const inputId = id || name;
     const inputRef = useSignal<HTMLInputElement>();
 
-    // TODO: remove this when we can figure out why the optimizer forces you to have a signal rather than conditionally adding the bind:value prop.
-    const dummySig = useSignal<string | undefined>(value?.toString());
-
     return (
       <>
         <input
           {...props}
           aria-errormessage={`${inputId}-error`}
-          aria-invalid={!!error}
-          bind:value={valueSig ? valueSig : dummySig}
+          aria-invaid={!!error}
+          // workaround for one way and two way data-binding https://github.com/QwikDev/qwik/issues/3926
+          value={valueSig ? valueSig.value : value}
+          onInput$={valueSig ? $((__, el) => (valueSig.value = el.value)) : onInput$}
           ref={inputRef}
           class={cn(
             'flex h-12 w-full rounded-base border border-input bg-background px-3 py-1 text-sm text-foreground shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50',