Merge pull request #772 from thejackshelton/fix-input

fix: input and bind:value

Author: thejackshelton

.changeset/fast-actors-report.md

@@ -105,6 +105,10 @@ export default component$(() => {
 
 - Programmatically toggling the popover is still possible, make sure to put the same id on the `<Popover.Root />` that is passed to the `usePopover` hook. Refer to the docs for more info.
 
+- popover-showing and popover-closing classes have been deprecated. Please use the `data-open` and ``data-closing` attributes instead.
+
+- The `data-open`, `data-closing`, and `data-closed` data attributes have been added to the popover.
+
 #### <Popover.Root />
 
 There is a new root compomnent. Configurable props have been moved to the root component.

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

@@ -2,5 +2,9 @@ import { component$ } from '@builder.io/qwik';
 import { Input } from '~/components/ui';
 
 export default component$(() => {
-  return <Input type="email" placeholder="Email" />;
+  return (
+    <>
+      <Input type="email" placeholder="Email" value="[email protected]" />
+    </>
+  );
 });

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

@@ -1,4 +1,4 @@
-import { component$, 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'> & {
@@ -10,19 +10,26 @@ 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
   }) => {
     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}
+          bind:value={valueSig ? valueSig : dummySig}
+          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',
             props.class,