[🐞] Input id can't be undefined

[ziimakc]

Which package is affected?

Styled Kit

Describe the bug

With exactOptionalPropertyTypes: true typescript config input component id can't be undefined.

To avoid similar issues I would suggest to use strict typescript configuration in repository.

import { $, component$, type PropsOf } from "@builder.io/qwik";
import { cn } from "../../utils/other";

type InputProps = PropsOf<"input"> & {
	error?: string;
};

export const Input = component$<InputProps>(
	({
		name,
		error,
		id,
		["bind:value"]: valueSig,
		value,
		onInput$,
		class: className,
		...props
	}) => {
		const inputId = id || name;  // can't be undefined

		return (
			<>
				<input
					{...props}
					aria-errormessage={`${inputId}-error`}
					aria-invaid={!!error}
					// 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(
						"rounded-base border-input bg-background text-foreground file:text-foreground placeholder:text-muted-foreground focus-visible:ring-ring flex h-12 w-full border px-3 py-1 text-sm shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium focus-visible:outline-none focus-visible:ring-1 disabled:cursor-not-allowed disabled:opacity-50",
						className,
					)}
					id={inputId}
				/>
				{error && (
					<div
						id={`${inputId}-error`}
						class="text-destructive mt-1 text-sm"
					>
						{error}
					</div>
				)}
			</>
		);
	},
);

Reproduction

none

Steps to reproduce

No response

System Info

none

Additional Information

No response

[thejackshelton]

@ziimakc did you mean to put headless kit on this issue? there is no headless input component

[thejackshelton]

Ah looks like the styled one