React Compiler breaks size "resetting" when input is reset

[t3dotgg]

Noticed a weird bug on a (not-yet-public) app I'm working on where

Without Compiler
https://github.com/user-attachments/assets/db6c3a1b-be77-4e05-a7de-3118089a1cec

With Compiler
https://github.com/user-attachments/assets/88e1148d-d843-403e-afe9-d149901cac79

Only weird thing I'm doing is using a ref to reset the input (so I don't have to track the text state in React)

export function ChatInput({ threadId }: ChatInputProps) {
  const navigate = useNavigate();

  const formRef = useRef<HTMLFormElement>(null);

  // Form action to handle submission
  const handleFormAction = (formData: FormData) => {
    const inputValue = formData.get("input") as string;

    formRef.current?.reset();
    ....

If this is hard to repro, lmk and I can make a sandbox. Also wouldn't be surprised if I'm just holding it wrong

Phenomenal library, will find some way to make it work 🫡

[Andarist]

A repro case would be appreciated

[t3dotgg]

🫡

https://stackblitz.com/edit/sb1-w3xektel?file=src%2FApp.tsx

Seems to only happen in uncontrolled scenarios, guessing some accessory rerender was allowing it to behave pre-compiler

I added a "last message" data attribute to hack around it for now

[t3dotgg]

Wait - it still is broken in this demo without compiler.

I think the re-render that allows it to work without compiler is something I was doing in a higher up component in my real app.

Not even sure if this would be considered a "bug", but it appears emptying the value via the form reset causes the resizing to break 🙃

If this is an issue you care about, I'm happy to rename this or cut a new one. I'm happy with my current understanding as well as my solution 🙏

[Andarist]

I experimented with potential fixes here: #409 . At first, I concluded that React doesn't fire onChange on those resets, so I thought it's the same issue as facebook/react#19078 . But now I can't repro my other conclusion - that using native 'change' would fix this. That doesn't seem to be called when those resets happen either.

So my best idea is to set up a timer in the form's reset listener :s and I just hate that but I don't see any other option right now.

Behavior of different kinds of listeners can be seen here: https://stackblitz.com/edit/vitejs-vite-dhqro6sy