Open Merott opened 2 months ago
Hey @Merott, I'm sorry for the issues with the release, and thank you so much for the CodeSandbox—it helped uncover some design flaws in the current solution. I believe it's best to revert the relevant changes (#778), and I will publish a patch shortly.
Describe the bug and the expected behaviour
When a form created with
@conform-to/react
is placed inside a component that only renders its children on the client-side (a common pattern for client-only components), the form's input field unexpectedly resets to its initial value after the first character is typed. This only occurs on the first input; subsequent inputs behave normally.Expected behaviour: The form's input field should maintain the typed character and not reset to its initial value, regardless of whether it's inside a client-only component or not.
Conform version
v1.2.1
Steps to Reproduce the Bug or Issue
To compare with normal behaviour, refresh the page and type in the input field before clicking the "Activate issue demo" button.
What browsers are you seeing the problem on?
Chrome, Firefox, Safari
Screenshots or Videos
Works normally when the form is rendered immediately on the page:
https://github.com/user-attachments/assets/deceff2f-908e-467d-bdaa-4eb59b9fa17b
But when rendered as a "client-side" component on the second render, it resets:
https://github.com/user-attachments/assets/fd372afe-0ba2-4bf4-abca-218e32fc812f
Additional context
The
SpecialComponent
in the Codesandbox demo is just a simplified version of client-only rendering, and quite common in React applications with SSR.For reference, here's the full code from the demo in Codesandbox
```tsx // App.tsx import { getInputProps, getFormProps, useForm } from "@conform-to/react"; import { Text, TextField, Flex, Theme, Button } from "@radix-ui/themes"; import { useEffect, useState } from "react"; export function App() { const [insideSpecialComponent, setInsideSpecialComponent] = useState(false); const [form, fields] = useForm({ onSubmit: (e) => e.preventDefault(), defaultValue: { greeting: "______" }, }); const formNode = ( ); const content = insideSpecialComponent ? (