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

Author: maiieul

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

@@ -0,0 +1,13 @@
+import { component$, useSignal } from '@builder.io/qwik';
+import { Textarea, 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>
+      <Textarea 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/textarea/index.mdx

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

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

@@ -1,23 +1,28 @@
-import { component$, PropsOf } from '@builder.io/qwik';
+import { $, component$, PropsOf } from '@builder.io/qwik';
 import { cn } from '@qwik-ui/utils';
 
 type TextareaProps = PropsOf<'textarea'> & {
   error?: string;
 };
 
-export const Textarea = component$<TextareaProps>(({ id, name, error, ...props }) => {
-  const textareaId = id || name;
-  return (
-    <>
-      <textarea
-        {...props}
-        class={cn(
-          '[&::-webkit-scrollbar-track]:bg-blue flex min-h-[60px] w-full rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-sm placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50',
-          props.class,
-        )}
-        id={textareaId}
-      />
-      {error && <div id={`${textareaId}-error`}>{error}</div>}
-    </>
-  );
-});
+export const Textarea = component$<TextareaProps>(
+  ({ id, name, error, ['bind:value']: valueSig, value, onInput$, ...props }) => {
+    const textareaId = id || name;
+    return (
+      <>
+        <textarea
+          {...props}
+          // workaround to support two way data-binding on the Input component (https://github.com/QwikDev/qwik/issues/3926)
+          value={valueSig ? valueSig.value : value}
+          onInput$={valueSig ? $((__, el) => (valueSig.value = el.value)) : onInput$}
+          class={cn(
+            '[&::-webkit-scrollbar-track]:bg-blue flex min-h-[60px] w-full rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-sm placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50',
+            props.class,
+          )}
+          id={textareaId}
+        />
+        {error && <div id={`${textareaId}-error`}>{error}</div>}
+      </>
+    );
+  },
+);