[Turbo] Input field missing from form with errors, even though it is in the HTML response

1

Hi everyone! I posted this over on Github issues but I realise now this is probably a better place for the conversation…

I’m experiencing a weird issue I don’t know how to debug. You can see it for yourself here: https://devvelo.com/users/sign_up

If you get any error when submitting the form (for example, a password too short or confirmation doesn’t match password), the form is re-rendered with the error message but the input itself is removed from the DOM. If you inspect the response, you can see the input is returned as part of the 422 response, but Turbo chooses not to render it / to remove it.

Disabling Turbo on the form causes it to behave as expected.

This is a standard Rails FormBuilder field, so it is wrapped with a .field_with_errors in the response - might this have something to do with it? Have I made some silly mistake? What tools would you use to debug this?

Thanks so much in advance for your help!

2

Further investigation reveals the issue only occurs when I:

  1. Have <meta name="turbo-refresh-method" content="morph"> in my head
  2. Have the LastPass extension enabled in my browser

So it must be some interplay between Idiomorph and LastPass, but I can’t reproduce it by making a plain HTML clone and just morphing it using a raw Idiomorph.morph command, so maybe Turbo is involved somewhere too?

Any ideas from anyone? Is it just a bad idea to have the refresh method set to “morph” globally?

3

An update - over on Github, Alex found a way to reproduce it and also a workaround: Input field missing from form with errors, even though it is in the HTML response · Issue #1291 · hotwired/turbo · GitHub

It looks like an Idiomorph bug so I’ve reported it upstream: Morphing deletes element in extremely specific situation involving LastPass extension and no whitespace between elements · Issue #60 · bigskysoftware/idiomorph · GitHub