Selector Dropdown Acting werid with Mouse hovering and Clicking

[JustKira]

Describe the bug

Check video not sure what is issue Tbh cursor not functioning Correctly ,this is on firebox based browser and i tested it on Chrom also same issue

20250416-0202-18.2791256.mp4

Also it doesn't mater if its inside Dialog or not

<script lang="ts">
    import { Select as SelectPrimitive, type SelectContentProps } from 'bits-ui';
    import { cubicInOut } from 'svelte/easing';
    import { fly } from 'svelte/transition';
 
    import CaretDoubleDown from '~icons/ph/caret-double-down-bold';
    import CaretDoubleUp from '~icons/ph/caret-double-up-bold';
 
    let { children, ...rest }: SelectContentProps = $props();
</script>
 
<SelectPrimitive.Portal>
    <SelectPrimitive.Content
        sideOffset={5}
        align="start"
        forceMount
        class="bg-surface-secondary z-50 flex h-96 max-h-[var(--bits-select-content-available-height)] w-[var(--bits-select-anchor-width)] min-w-[var(--bits-select-anchor-width)] flex-col gap-1 rounded-md border outline-none"
        {...rest}
    >
        {#snippet child({ wrapperProps, props, open })}
            {#if open}
                <div {...wrapperProps}>
                    <div
                        {...props}
                        transition:fly={{
                            y: 10,
                            duration: 200,
                            easing: cubicInOut
                        }}
                    >
                        <SelectPrimitive.ScrollUpButton
                            class="text-paragraph flex w-full items-center justify-center"
                        >
                            <CaretDoubleUp class="size-3" />
                        </SelectPrimitive.ScrollUpButton>
                        <SelectPrimitive.Viewport class="p-1">
                            {@render children?.()}
                        </SelectPrimitive.Viewport>
                        <SelectPrimitive.ScrollDownButton
                            class="text-paragraph flex w-full items-center justify-center"
                        >
                            <CaretDoubleDown class="size-3" />
                        </SelectPrimitive.ScrollDownButton>
                    </div>
                </div>
            {/if}
        {/snippet}
    </SelectPrimitive.Content>
</SelectPrimitive.Portal>

<script lang="ts">
    import { Select as SelectPrimitive, type SelectItemProps } from 'bits-ui';
 
    let { children: drilledChild, label, class: className, ...rest }: SelectItemProps = $props();
</script>
 
<SelectPrimitive.Item
    class={[
        'data-highlighted:bg-button-secondary-hover text-text relative flex h-10 w-full cursor-default items-center rounded-sm p-2 text-base/50 outline-transparent transition-colors duration-300 select-none focus:outline-offset-2 data-highlighted:text-base data-highlighted:outline-2 data-selected:text-base data-selected:font-medium',
        className
    ]}
    {...rest}
>
    {#snippet children(props)}
        {@render drilledChild?.(props)}
        {label}
    {/snippet}
</SelectPrimitive.Item>

<Dialog.Root bind:open>
    <Dialog.Trigger>
    ...
    </Dialog.Trigger>
    <Dialog.Content class="w-full !max-w-96">
        <Dialog.Header>
            ...
        </Dialog.Header>
        <form use:enhance class="space-y-2 pt-1.5">
            ...
            <Form.Field {form} name="floor_plan">
                <Form.Control>
                    {#snippet children({ props })}
                        <Form.Label>Floor Plan</Form.Label>

                        <Select.Root type="single" bind:value={$formData.floor_plan} name={props.name}>
                            <Select.Trigger {...props} class="w-full">
                                {selectedFloorPlan ? selectedFloorPlan.name : 'Select a Floor Plan'}
                            </Select.Trigger>
                            <Select.Content>
                                {#each floorPlans as floorPlan (floorPlan.id)}
                                    <Select.Item value={floorPlan.id} label={floorPlan.name} />
                                {/each}
                            </Select.Content>
                        </Select.Root>
                    {/snippet}
                </Form.Control>
                <Form.Description />
                <Form.FieldErrors />
            </Form.Field>
            <Form.Button submitting={$submitting} delayed={$delayed} timeout={$timeout} class="w-full"
                >Create</Form.Button
            >
        </form>
    </Dialog.Content>
</Dialog.Root>

Reproduction

I Have provided Select Content and Select Item

Logs

System Info

Chrome,Firefox,Zen (Firefox)

Severity

annoyance

[huntabyte]

Can you drop a stackblitz reproduction? It looks like duplicate ids/values to me but want to confirm.

[JustKira]

Could you explain what do you want in that Example do you need same snippet of data? or just ui components.