Morphing overwrites the user's input on active element

[weaverryan]

Hi!

In #1195, ignoreActiveValue: true was reverted, which was the correct decision. The idea is that, even for the active element, the source of truth is the value attribute that's returned in the HTML used for morphing.

However, this breaks situations where you have an <input type="search"> that autosubmits as you type:

turbo-morph-lose-new-value.mp4

Here's what happens:

A) User typesapple and pauses
B) A Stimulus controller submits the form
C) WHILE the Ajax request is happening, the user types df (so now the box has appledf)
D) The Ajax request finishes, and the new HTML contains value="apple" because that value was submitted. This causes the df to be lost on the input.

This continues a conversation from #1194 with @seanpdoyle - #1194 (comment) - who originally set ignoreActiveValue: true in part to help solve this problem.

I'm not sure what the solution is. In LiveComponents, we solve this with an approach that is probably too heavy-handed for Turbo: by tracking input changes that happen after the Ajax request starts and making sure to preserve those during morphing.

Cheers!

[brunoprietog]

As pointed out in that PR, did you try adding data-turbo-permanent to the input when focusing and removing the attribute when unfocusing? Like data-action="focus->element#makePermanent blur->element#makeNotPermanent"

[weaverryan]

As pointed out in that PR, did you try adding data-turbo-permanent to the input when focusing and removing the attribute when unfocusing? Like data-action="focus->element#makePermanent blur->element#makeNotPermanent"

Hi! I was more looking for "what is the proper way to handle this situation". And... maybe this is it? Maybe the idea is:

When a new page is morphed, if the user has been actively typing into an input, their new text might be replaced. To avoid, this, you can mark the input as permanent when its focused by... etc, etc.

If that's the case, should we provide an attribute for this? data-turbo-preserve-focus-value? It's a little wordy... but the hope is to allow for both situations:

A) In my form, the user hits "Enter" to submit and I redirect and re-render a clear form. So I want the focused input to have its value cleared (current behavior)
B) My form is auto-submitting as the user is typing and I DO want to keep the value in the form, even if it differs from the server.

[brunoprietog]

It's simpler than that. When you focus the input, if you add the data-turbo-permanent attribute, Turbo knows that this element does not have to be touched when morphing. Therefore, it won't lose focus and the value won't change either. You just have to make sure to remove the attribute when blurring. With that you can easily cover case B. Honestly, I see it unlikely that the team would want to add something like that, since that means maintaining an API for a case that can be easily solved with Stimulus.

[weaverryan]

Then, at least for now, let's go with this as the official solution 👍

[til]

I like the idea to set data-turbo-permanent on the focused element! However in order to work, it seems that it also needs to be set on the same element of the replacement HTML? The server can not set it because it doesn't know the focused element – resorting to custom JS in turbo:before-frame-render that copies data-turbo-permanent feels a bit hacky but works. I've posted about it over there: https://discuss.hotwired.dev/t/form-that-changes-on-user-input-without-losing-focus/6117, feedback welcome.