Submitting a form that contains any Radix Select component scrolls the page to the Select element in Safari

[ChristianIvicevic]

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

1. Clone my reproduction that I have attempted to reduce as much as possible: https://github.com/ChristianIvicevic/select-safari-scroll-bug
2. Run pnpm install
3. Run pnpm dev
4. Open http://localhost:3000/admin/things
5. Observe the behaviour as described and seen in the videos
6. 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