Modals: error messages not showing on small screens, but showing on large screens

[kaka-ruto]

HI! First of all thank you for this work!

I am displaying a modal with a form to create a post, running backend validations on submit and displaying any errors on the modal if any, otherwise closing the modal and redirecting to the new post page

This is my code

  # posts/index.html.erb
  <div class="text-white mx-4" data-controller="modal">
    <button class="flex items-center" type="button" data-action="click->modal#open:prevent">
      <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-4 h-4 mr-2">
        <path stroke-linecap="round" stroke-linejoin="round" d="M6 12 3.269 3.125A59.769 59.769 0 0 1 21.485 12 59.768 59.768 0 0 1 3.27 20.875L5.999 12Zm0 0h7.5" />
      </svg>
      Post
    </button>

    <dialog data-modal-target="dialog" data-action="click-&gt;modal#backdropClose"
                                       class="modal rounded-lg max-w-sm max-h-screen w-full bg-transparent backdrop:backdrop-blur-sm backdrop:bg-black/50">
      <%= render partial: "posts/form", locals: { post: Post.new } %>
    </dialog>
  </div>

# posts/_form.html.erb
<%= form_with model: post, id: dom_id(post) do |form| %>
  <div class="p-6 bg-white dark:bg-gray-900 dark:text-gray-200">
    <button type="button" data-action="modal#close:prevent" class="text-gray-700 hover:cursor-pointer rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none disabled:pointer-events-none">
      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="h-6 w-6"><line x1="18" x2="6" y1="6" y2="18"></line><line x1="6" x2="18" y1="6" y2="18"></line></svg>
      <span class="sr-only">Close</span>
    </button>

    <%= render "error_messages", resource: form.object %>

    <div>
      <%= form.text_area :content, placeholder: "Make a Rev", rows: 6, class: "block w-full border-none py-1.5 text-base md:text-lg text-gray-900 placeholder:text-gray-400 placeholder:text-lg focus:ring-0 sm:leading-6" %>
    </div>

    <div>
      <div class="flex justify-between items-center mt-2">
        <% if form.object.new_record? %>
          <%= link_to t("cancel"), feed_path, data: { turbo_frame: "_top" }, class: "btn btn-secondary" %>
        <% else %>
          <%= link_to t("cancel"), post_path(@post), data: { turbo_frame: "_top" },class: "btn btn-secondary" %>
        <% end %>

        <%= form.submit "Post", class: "btn btn-primary" %>
      </div>
    </div>
  </div>
<% end %>

# posts/create.turbo_stream.erb
<%= turbo_stream.replace(:new_post) do %>
    <%= render partial: "posts/form", locals: { post: @post } %>
<% end %>

def create
    @post = current_user.posts.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.turbo_stream
        format.html { render :new, status: :unprocessable_entity }
        format.json { render json: @post.errors, status: :unprocessable_entity }
      end
    end
  end

On sm screens, the error messages do not show at all on the modal(or anywhere I could see). The modal just stays blank. I put a breakpoint into the form, checked and the post does have errors, even ran render "error_messages", resource: form.object and the error messages are being rendered, just not being displayed!

On md and lg screens, the form errors show well (though one problem I have on these screens is once the errors show on the form, if I close the modal and click create post again, the previous errors are still on the form. The form is reset only after a page refresh. Ideally they should be gone when I close the form. Any way around this as well?)

Thank you very much!

[excid3]

I would need to have a repository that reproduces this to help, but it also doesn't seem to be related to TailwindCSS Stimulus Components.

[kaka-ruto]

It might not be related to TailwindCSS Stimulus Components for sure. I am using Jumpstart Pro. When I get some time to reproduce this I will put something up, otherwise it might be possible to reproduce with Jumpstart Pro

[excid3]

Sounds good 👍