[2.0 bug] different/incorrect behaviour due to bump fresh@1.7.3 up to @fresh/core@^2.0.0-alpha.29

[calmdowngirl]

i have a partial route login.tsx, it renders a different form depending on what data the handler returns. theres an input field in each form, and theyre pretty much in identical shape except for having different id, name, placeholder etc. what the partial route does is first it asks for email, after user enters email, it then email a code to the user and displays the another form that asks for the code which user would get from their email, user then submit the code, then they get a session in the cookie.

the form looks like this

<form method="POST" autocomplete="off" id="email-form" class="mt-2">
    <input
      class="focus:outline-1 focus:outline-yellow-300"
      type="email"
      id="email-address"
      name="email"
      placeholder=" enter email"
      autocomplete="off"
      autoFocus
      defaultValue=""
      required
    />
    <input
      type="submit"
      value="send code"
      class="px-3 bg-yellow-300 cursor-pointer rounded-sm hover:bg-lime-200"
    />
</form>

w/ v1.7.3, when the second form(same as above just having different id, name etc) is displayed, the input field is empty which is as expected (see vid below), as u can see ive explicitly added autocomplete="off" and defaultValue="" attributes.

w/ fresh v2, when the second form is displayed, the input field is pre-filled w the email address user entered in the email form (see vid below), which is an unexpected and unwanted behaviour change, and i think its incorrect given the form and input has different id and name, and autocomplete="off", defaultValue="" attributes. And the behaviour completely confuses the user as they cant see the placeholder at all, its hard to notice this is another form, and they have to delete the email address for them to be able to enter the code and submit it. its impossible really.

im tryna start this little side project, do really want to try fresh and v2 now instead of having to upgrade it much later.

steps to reproduce:
code here: repo, main branch is fresh v1, fresh v2 is on deno2 branch
ive deployed each branch to a deno deploy project, u can find the link in the gh actions on each branch if u wanna check the behaviour in the vids (i dont wanna post it here even tho the links already public, gcp will charge me $$ for sending email 😂)

fresh-v1.mov

fresh-v2.mov

[marvinhagemeister]

I'm kinda wondering how both scenarios can be supported. A valid use case for keeping input values is using partials to show validation errors. You don't necessarily want to clear input fields in that case.

[calmdowngirl]

A valid use case for keeping input values is using partials to show validation errors. You don't necessarily want to clear input fields in that case.

is it valid even when the partial is not the same partial, and the input is not the same input?

[marvinhagemeister]

No

[calmdowngirl]

No

ive no context what a partial key is and how its generated or being used, but in this case, in @SisyphusZheng 's pr, if we concatenate the partial name instead of Date.now(), would it solve for the case when we want to keep the input value when for the same partial?

[bartlomieju]

This is still relevant. The root cause is Preact's virtual DOM diffing during partial replacement.

When the partial swaps one form for another with a similar structure (same tag names, same nesting), Preact's diff algorithm reuses the existing DOM <input> element rather than creating a new one. The browser preserves the user's typed value on the reused DOM node, ignoring defaultValue="" and autocomplete="off" (those only apply on initial creation, not on reuse).

This is the same problem as React/Preact's classic "uncontrolled input reuse" issue — it's not specific to partials, but partials make it easy to hit.

Workaround

Add a unique key to the form (or the input) so Preact treats them as different elements and creates a fresh DOM node:

// Email form
<form key="email-form" method="POST" ...>
  <input type="email" name="email" ... />
</form>

// Code form
<form key="code-form" method="POST" ...>
  <input type="text" name="code" ... />
</form>

The key tells Preact these are distinct subtrees, forcing it to unmount the old form and mount a new one rather than patching in place.