Top of the Drawer leaves the viewport

[famwulff]

ScreenRecording_01-28-2025.23-28-48_1.mp4

[famwulff]

I am using the drawer and would like to show some inputs into it.
However if I focus a input field the whole drawer moves to the top and the input field gets focused.
It is fine that the input field get in focus. However I expected that the drawer don’t move.

Maske follows a simple example of the used drawer:
+page.svelte:
<Drawer.Root bind:open> <Drawer.Trigger class="py-3 {buttonVariants({ variant: "outline" })}" >Drawer öffnen</Drawer.Trigger> <Drawer.Content> <Drawer.Header> <div class="flex justify-between"> <Drawer.Close class="{buttonVariants({ variant: "ghost", size: "none" })} text-body font-normal" onclick={() => onClose()} > Abbrechen </Drawer.Close> <Drawer.Title class="justify-items-center text-headline">{title}</Drawer.Title> <Button variant="ghost" size="none" class="text-body font-normal" type="submit" onclick={…}> Erstellen </Button> </div> </Drawer.Header> <ScrollArea class="overflow-y-auto"> <div class="bg-green h-[500px]"></div> <input class="text-md"> <div class="bg-grey h-[500px]"></div> <div class="bg-destructive h-[500px]"></div> </ScrollArea> </Drawer.Content> </Drawer.Root>

Attached you can find a video.
By uploading the video the content got lost. Sorry