alpine-turbo-drive-adapter: fail when render status: :unprocessable_entity

def create
    @post = Post.new(post_params)

    respond_to do |format|
      if @post.save
        format.html { redirect_to @post, notice: "Post was successfully created." }
        format.json { render :show, status: :created, location: @post }
      else
        format.html { render :new, status: :unprocessable_entity }
        format.json { render json: @post.errors, status: :unprocessable_entity }
      end
    end
  end

class Post < ApplicationRecord
  validates :title, presence: true
end

new.html.erb


<div x-data="{text: 'demo' }">
  <div x-text="text"></div>
</div>


<%= form_with(model: @post) do |f| %>
  <%= f.label :title %>
  <%= f.text_field :title %>
  <%= f.submit %>
<% end %>

when title is blank and render 422 status, alpine won’t work.

About this issue

Original URL
State: closed
Created 3 years ago
Reactions: 1
Comments: 32 (16 by maintainers)

Most upvoted comments

@SimoTod turbo:submit-end doesn’t seem to do the trick. I fixed it on my project by initializing alpine components on turbo:render.

turbo:render can trigger twice (when you visit a cached page) so it’s not optimal, but I can’t see a way around it 🤷‍♂️

If we use turbo:render listener, we can remove the one on turbo:load. Otherwise we would be initializing alpine components 2-3 times on each page visit (if we use both).

For anyone looking for a quick workaround till this is resolved, try this:

window.addEventListener('turbo:render', function (event) {
    window.Alpine.discoverUninitializedComponents((el) => {
        window.Alpine.initializeComponent(el)
    });
});

KostasKostogloy on Mar 10, 2021

@SimoTod I’ve retested the scenario where I had the original issue, using v1.1.0, and the problem is no longer there (i.e. my Alpine markup is working perfectly after submitting a form that returns a 422 response)

I successfully tested with the following browsers:

✅ Safari v14.1 (MacOS) ✅ Google Chrome v90.0 (MacOS) ✅ Firefox v88.0 (MacOS) ✅ iOS Safari v14.1 (on iPhone iOS 14.5) ✅ MS Edge v90.0 (Windows 10) ✅ Android Chrome v83 (on Android 11 - via Android Studio simulator)

Thanks again for your patience and getting this fixed so quickly, nice job.

rickclare on May 3, 2021

@SimoTod thank you for your perseverance with this. I’ll find some time tomorrow to test out the new version and report back. Have a great weekend.

It will likely be Sunday. I decided to run a few more tests for both features first. 👍

SimoTod on Apr 30, 2021

I believe edge doesn’t support ?? so it needs to be transpiled properly. The cdn version should already be compatible with ms edge and possibly ie11

SimoTod on Apr 30, 2021

@SimoTod that’s great, thank you for jumping on the fix so quickly. I’ll do some more testing tomorrow to double check v1.0.4 in the browsers that I have access to (everything popular apart from MS Edge)

Thanks again.

rickclare on Apr 29, 2021

The problem with using render is that it might break the page in other edge cases introducing flickerings, etc. I’ll check safari tomorrow.

SimoTod on Apr 29, 2021

@SimoTod thanks for your hard work 🙇‍♂️

I am going to test this in the next few days and get back to you.

KostasKostogloy on Apr 27, 2021