event binding on Input (and probably other components)

[NaturalHacks]

Describe the bug

Events and bindings don't get passed correctly on components, I battled this issue with Input, perhaps i'm a noob and have been doing it wrong.

Reproduction

import { Input } from "$lib/components/ui/input";

then try to use an event such as keydown

            <Input
            id="username"
            name="username"
            type="text"
            on:keydown={() => console.log('Input event detected on username field')}
            required
          />

you will get nothing,

solution i have found is to add the required events ( and bind aswell)
to the component

<script lang="ts">
	import { cn } from "$lib/utils";
	import type { HTMLInputAttributes } from "svelte/elements";
  
	type $$Props = Omit<HTMLInputAttributes, 'onkeydown' | 'class'> & {
	  onkeydown?: (event: KeyboardEvent) => void;
	  class?: string | undefined;
	};
  
	let className: string | undefined = undefined;
	export { className as class };
	export let value: string | number | undefined = undefined;
</script>
  
<input
	class={cn(
	  "flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
	  className
	)}
	bind:value
	{...$$restProps}
	on:blur
	on:focus
	on:keydown
	on:keyup
	on:keypress
	on:input
	on:change
	on:paste
	on:cut
/>

Logs

No response

System Info

System:
    OS: Linux 6.9 Pop!_OS 22.04 LTS
    CPU: (24) x64 AMD Ryzen 9 5900X 12-Core Processor
    Memory: 4.10 GB / 15.52 GB
    Container: Yes
    Shell: 5.8.1 - /usr/bin/zsh
  Binaries:
    Node: 20.18.0 - ~/.nvm/versions/node/v20.18.0/bin/node
    npm: 10.8.2 - ~/.nvm/versions/node/v20.18.0/bin/npm
    pnpm: 9.12.3 - ~/.nvm/versions/node/v20.18.0/bin/pnpm
  npmPackages:
    @sveltejs/kit: ^2.0.0 => 2.8.1 
    bits-ui: ^0.21.16 => 0.21.16 
    lucide-svelte: ^0.460.1 => 0.460.1 
    svelte: ^5.0.0 => 5.2.3

Severity

annoyance

[ieedan]

Is this Svelte 5? If so all events are now "onclick" not "on:click"

[NaturalHacks]

Is this Svelte 5? If so all events are now "onclick" not "on:click"

ah will test in a minute, what about bind:value

[ieedan]

You need to use runes to make sure the binding is reactive with "$state"

[huntabyte]

What @ieedan said 🫡