Bro search dont work for me

[neondeex]

https://gyazo.com/1bbef3401ebea1766add533894007dd7

[ieedan]

Could you provide the code or a reproduction?

[neondeex]

Could you provide the code or a reproduction?

Copy pase of your component and this

[ieedan]

Can I see the component code?

[neondeex]

Oh totally forgot that i changed the index.ts since it was giving me a problem with root this is the current index

import type {
    Country,
    CountryCode,
    DetailedValue,
    E164Number,
    TelInputOptions
} from 'svelte-tel-input/types';

import PhoneInputComponent from './phone-input.svelte';

export type Props = {
    country?: CountryCode | null;
    defaultCountry?: CountryCode | null;
    el?: HTMLInputElement;
    name?: string;
    placeholder?: string;
    disabled?: boolean;
    readonly?: boolean;
    class?: string;
    value: E164Number | null;
    valid?: boolean;
    detailedValue?: Partial<DetailedValue> | null;
    options?: TelInputOptions;
    order?: ((a: Country, b: Country) => number) | undefined;
};

export const defaultOptions: TelInputOptions = {
    spaces: true,
    autoPlaceholder: false,
    format: 'international'
};

export { PhoneInputComponent as default };

And when I use the default one I get this in console

ReferenceError: can't access lexical declaration 'Root' before initialization
    <anonymous> index.ts:32

[ieedan]

You would get that error because you are importing from the .svelte instead of index.ts

Try importing the component from 'lib/components/ui/phone-input'

[ieedan]

The search code is in the .svelte can you send that as well

[neondeex]

TypeError: __vite_ssr_import_13__.default is not a function
    at children (/home/neonDev/dev/tdm/events360/src/routes/configurar-perfil/+page.svelte:231:37)
    at Module.slot (/home/neonDev/dev/tdm/events360/node_modules/svelte/src/internal/server/index.js:415:3)
    at Module.Card_content (/home/neonDev/dev/tdm/events360/src/lib/components/ui/card/card-content.svelte:25:24)
    at children (/home/neonDev/dev/tdm/events360/src/routes/configurar-perfil/+page.svelte:103:27)
    at Module.slot (/home/neonDev/dev/tdm/events360/node_modules/svelte/src/internal/server/index.js:415:3)
    at Module.Card (/home/neonDev/dev/tdm/events360/src/lib/components/ui/card/card.svelte:25:24)
    at $$render_inner (/home/neonDev/dev/tdm/events360/src/routes/configurar-perfil/+page.svelte:75:25)
    at _page (/home/neonDev/dev/tdm/events360/src/routes/configurar-perfil/+page.svelte:882:3)
    at children (/home/neonDev/dev/tdm/events360/.svelte-kit/generated/root.svelte:94:6)
    at _layout (/home/neonDev/dev/tdm/events360/src/routes/+layout.svelte:11:11)

Now im getting this error and this is my component code

<script lang="ts">
    import CountrySelector from './country-selector.svelte';
    import { defaultOptions, type Props } from '.';
    import { cn } from '$lib/utils';
    import { TelInput, normalizedCountries } from 'svelte-tel-input';
    import 'svelte-tel-input/styles/flags.css';

    const countries = normalizedCountries;

    type $$Props = Props;

    let className: $$Props['class'] = undefined;
    export let defaultCountry: $$Props['defaultCountry'] = null;
    export let country: $$Props['country'] = defaultCountry;
    export let options: $$Props['options'] = defaultOptions;
    export let placeholder: $$Props['placeholder'] = undefined;
    export let readonly: $$Props['readonly'] = false;
    export let disabled: $$Props['disabled'] = false;
    export let value: $$Props['value'] = null;
    export let valid: $$Props['valid'] = false;
    export let detailedValue: $$Props['detailedValue'] = null;
    export let order: $$Props['order'] = undefined;
    export let name: $$Props['name'] = undefined;
    export { className as class };

    let el: HTMLInputElement;

    export const focus = () => {
        // sort of an after update kinda thing
        setTimeout(() => {
            el.focus();
        }, 0);
    };
</script>

<div class="flex place-items-center">
    <CountrySelector {order} {countries} bind:selected={country} on:select={focus} />
    <TelInput
        {...$$restProps}
        {name}
        bind:country
        bind:detailedValue
        bind:value
        bind:valid
        bind:readonly
        bind:disabled
        bind:placeholder
        bind:el
        {options}
        required
        class={cn(
            'flex h-10 w-[212px] rounded-lg rounded-l-none border border-l-0 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
        )}
    />
</div>

[ieedan]

Sorry it's in the country selector code

[neondeex]

<script lang="ts">
    import * as Popover from '$lib/components/ui/popover';
    import { Button } from '$lib/components/ui/button';
    import * as Command from '$lib/components/ui/command';
    import { ScrollArea } from '$lib/components/ui/scroll-area';
    import { Check, ChevronsUpDown } from 'lucide-svelte';
    import { cn } from '$lib/utils';
    import Flag from './flag.svelte';
    import { createEventDispatcher } from 'svelte';
    import type { Country, CountryCode } from 'svelte-tel-input/types';

    const dispatch = createEventDispatcher();

    /** List of countries */
    export let countries: Country[];
    export let disabled = false;
    export let selected: CountryCode | null = null;
    /** Default ordering is alphabetical by country name supply this function to customize the sorting behavior  */
    export let order: (a: Country, b: Country) => number = (a, b) => {
        return a.name.localeCompare(b.name);
    };

    $: selectedCountry = countries.find((a) => a.iso2 == selected);

    let open = false;

    const selectCountry = (country: Country) => {
        selected = country.iso2;
        open = false;
        dispatch('select', selected);
    };
</script>

<Popover.Root bind:open>
    <Popover.Trigger asChild let:builder>
        <Button
            type="button"
            variant="outline"
            builders={[builder]}
            class={cn('flex gap-1 rounded-e-none rounded-s-lg px-3')}
            {disabled}
        >
            <Flag country={selectedCountry} />
            <ChevronsUpDown class={cn('-mr-2 h-4 w-4 opacity-50', disabled ? 'hidden' : 'opacity-100')} />
        </Button>
    </Popover.Trigger>
    <Popover.Content class="w-[300px] p-0">
        <Command.Root>
            <Command.Input placeholder="Search country..." />
            <Command.List>
                <ScrollArea class="h-72">
                    <Command.Empty>No country found.</Command.Empty>
                    <Command.Group>
                        {#each countries.sort(order) as country}
                            <Command.Item
                                class="gap-2"
                                value={country.name}
                                onSelect={() => selectCountry(country)}
                            >
                                <Flag {country} />
                                <span class="flex-1 text-sm">{country.name}</span>
                                <span class="text-sm text-foreground/50">
                                    +{country.dialCode}
                                </span>
                                <div class="w-4">
                                    {#if country.iso2 == selected}
                                        <Check class="size-4" />
                                    {/if}
                                </div>
                            </Command.Item>
                        {/each}
                    </Command.Group>
                </ScrollArea>
            </Command.List>
        </Command.Root>
    </Popover.Content>
</Popover.Root>

[ieedan]

Nothing obvious just from looking at the code.

[ieedan]

It may be a difference in the command component or a dependency of it all the searching is through that

[neondeex]

But right now with the changes im just getting this error (importing the index) TypeError: __vite_ssr_import_13__.default is not a function at children (/home/neonDev/dev/tdm/events360/src/routes/configurar-perfil/+page.svelte:231:37) at Module.slot (/home/neonDev/dev/tdm/events360/node_modules/svelte/src/internal/server/index.js:415:3) at Module.Card_content (/home/neonDev/dev/tdm/events360/src/lib/components/ui/card/card-content.svelte:25:24) at children (/home/neonDev/dev/tdm/events360/src/routes/configurar-perfil/+page.svelte:103:27) at Module.slot (/home/neonDev/dev/tdm/events360/node_modules/svelte/src/internal/server/index.js:415:3) at Module.Card (/home/neonDev/dev/tdm/events360/src/lib/components/ui/card/card.svelte:25:24) at $$render_inner (/home/neonDev/dev/tdm/events360/src/routes/configurar-perfil/+page.svelte:75:25) at _page (/home/neonDev/dev/tdm/events360/src/routes/configurar-perfil/+page.svelte:882:3) at children (/home/neonDev/dev/tdm/events360/.svelte-kit/generated/root.svelte:94:6) at _layout (/home/neonDev/dev/tdm/events360/src/routes/+layout.svelte:11:11)