Add configuration option to disable DOM morphing

[tcannonfodder]

Describe Problem

While I do appreciate the default behavior of using DOM morphing on to render form errors, it would be great to be able to disable it at both the element level using data- attributes, and library-wide. It's actually causing a FOUC with my font-awesome icons. I also don't want to add Turbo to my project, because it mucks around with the DOM & navigation flow too much for my liking

Suggest Solution

2 configuration options that stop calling morphResponse:

• data-skip-ujs-morph
• a disableErrorRenderer: true flag in mrujs.start

Additional Details

👋 Thanks for this library, I'm glad folks are carrying the torch of UJS!

[KonnorRogers]

@tcannonfodder I don't think I documented it anywhere, but technically you can stop morphs like this:

<form data-ujs-morph="false">
</form>

mrujs/src/navigationAdapter.ts

Line 168 in 315a4b8

const shouldMorph = element.getAttribute('data-ujs-morph')

The other option is to add an event listener for the ajax:beforeNavigate event.

document.addEventListener("ajax:beforeNavigate", (e) => {
  if (e.detail.fetchResponse.ok) return
  
  // We're in 4xx -> 5xx territory here.
  e.preventDefault()
})

A config option would make it easier, but it's at least possible today!

[tcannonfodder]

This is great to know! I'll submit a PR to document this!

[KonnorRogers]

Thanks! ❤️

May also be worth double checking that it works as welll 🙈

[tcannonfodder]

Note for future detectives: the event is ajax:beforeNavigation

[KonnorRogers]

🕵️ thanks!

[tcannonfodder]

Of course!

An alternative: is there documentation on how to write a different navigation adapter? I might try making my own, where it checks for 322 and a JSON body with location and uses that to redirect using window.location.replace

[KonnorRogers]

@tcannonfodder it's largely internal, but you should be able to stop the adapter and do a simple replace for your use-case.

document.addEventListener("ajax:beforeNavigate", (e) => {
  if (e.detail.fetchResponse.status !== 322) return
  
  // We're in 322 territory here.
  e.preventDefault()
  window.location.replace(e.detail.fetchResponse.url)
})

I think that would cover your use-case