Description
Describe the bug and the expected behavior
My page has a form that contains a single Select element (in my case a shadcn/ui-based Select on top of Radix). I noticed that Conform seemingly causes the Select element to scroll into the view once the fired action finishes. I wasn't able to replicate this behaviour without Conform so I assume it's not necessarily an upstream issue with Radix. This unexpected behavior is only occurring in Safari but not in Chrome-based browsers.
Attached to this bug report are two screen captures: the first will show that submitting the form will return a fake error at which point the select will jump into the view and the scroll position will be lost. The second video shows the behaviour of the form after I have removed the Select from the page. You will notice that submitting the form will not cause the page to jump to the Select.
Conform version
v1.2.2
Steps to Reproduce the Bug or Issue
- Clone my reproduction that I have attempted to reduce as much as possible: https://github.com/ChristianIvicevic/select-safari-scroll-bug
- Run
pnpm install
- Run
pnpm dev
- Open
http://localhost:3000/admin/things
- Observe the behaviour as described and seen in the videos
- The offending Select is located here: https://github.com/ChristianIvicevic/select-safari-scroll-bug/blob/05980e68a0104161afff6fa491bb863b679a1002/src/app/(modern)/admin/things/components.client.tsx#L174-L180
Do note that even dropping in a simple Select as seen in the shadcn/ui docs such as the following will still cause the unexpected behaviour:
import {
Select,
SelectContent,
SelectGroup,
SelectItem,
SelectLabel,
SelectTrigger,
SelectValue,
} from "@/components/ui/select"
<Select>
<SelectTrigger className="w-[180px]">
<SelectValue placeholder="Select a fruit" />
</SelectTrigger>
<SelectContent>
<SelectGroup>
<SelectLabel>Fruits</SelectLabel>
<SelectItem value="apple">Apple</SelectItem>
<SelectItem value="banana">Banana</SelectItem>
<SelectItem value="blueberry">Blueberry</SelectItem>
<SelectItem value="grapes">Grapes</SelectItem>
<SelectItem value="pineapple">Pineapple</SelectItem>
</SelectGroup>
</SelectContent>
</Select>
What browsers are you seeing the problem on?
Safari
Screenshots or Videos
CleanShot.2024-09-28.at.20.38.49.mp4
CleanShot.2024-09-28.at.20.39.40.mp4
Additional context
I'd like to hear whether you can pin-point the issue. That even a simple Select that is not wired up with Conform still causes this behaviour might indicate an upstream issue despite my failed attempts to reproduce it.
I am using Safari Version 17.6 (19618.3.11.11.5) on macOS Sonoma 14.6.1