How to handle input events with Command.Input?

[JustDenP]

I wanted to make a basic functionality with show/hide Command.List if the input is focused or not, but none of any default events are working, I tried to pass them inside Command.Input like in other Input components in shadcn library, but with no luck.

So basically I have this code, but events are not working. Can I make them work somehow? Thank you in advance!

<Command.Root>
        <Command.Input
        bind:value={search}
        on:input={() => {
            console.log('input');
        }}
        on:blur={() => {
            console.log('blur');
        }}
    />
    <Command.List open={isInputFocused}>
    </Command.List>
</Command.Root>

[huntabyte]

Whoops! Forgot to forward those events up! Will add that as soon as I get the chance!

[JustDenP]

Thank you!

[aldo-roman]

@huntabyte This is still not working for me in cmdk-sv@0.0.12

[gitVasile]

Hello, is there any update here? Still closed but not fixed.

Thank you

[gitVasile]

To make it work I added on:input (or any event supported here) into the command-input.svelte

<script lang="ts">
    import { Command as CommandPrimitive } from "cmdk-sv";
    import MagnifyingGlass from "svelte-radix/MagnifyingGlass.svelte";
    import { cn } from "$lib/utils.js";
    import IconSearch from "@components/SVG/Icons/IconSearch.svelte";

    type $$Props = CommandPrimitive.InputProps;

    let className: string | undefined | null = undefined;
    export { className as class };
    export let value: string = "";
</script>

<div class="flex items-center border-b px-3" data-cmdk-input-wrapper="">
    <span class="flex w-5 h-5 shrink-0">
        <IconSearch />
    </span>
    <CommandPrimitive.Input
        class={cn(
            "flex h-10 w-full rounded-md bg-transparent py-3 text-sm outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50",
            className
        )}
        {...$$restProps}
        bind:value
        on:input
    />
</div>

And then used like this:

<Command.Input
        on:input={(e) => {
            test(e);
        }}
    />