We've moved discussions to Discord

Join Discord

Close modal on remote form submit

Alex Deering •
I have a modal that has a remote form on it that refreshes a part of the page.  The modal closes cause the partial that has it is part of the render.  But since modal#close" isnt called the page scrolling doesnt come back.  If I add the data-action command to the form submit button to close the modal then the form doesnt get submitted (cause close prevents default in it)

How can i call the close and still submit the form?
Chris Oliver •
If you don't want to trigger the modal#close as part of the remote form submit or response, you can unlock the scroll manually.

All that's defined here: https://github.com/excid3/tailwindcss-stimulus-components/blob/master/src/modal.js#L109-L121
Alex Deering •
i would prefer to just send the modal#close as part of the remote form submit, but when I add the data-action to the submit button it cancels the form submission.  How can I do both with the form.submit button.  Here is my modal:
<div data-controller="modal">
        <button class="btn btn-primary <%= 'outline' if !@recipe.made_by.include?(current_user) %> mt-2 mr-2 text-justify" data-action="click->modal#open">
          <%= render_svg "icons/thumbs-up", styles: "fill-current text-color-black icon-lg", title: "Rate/Comment" %>  I Made It
        </button>
        <div data-target="modal.container" class="hidden animated fadeIn">
          <div class="fixed z-50 top-0 left-0 w-full h-full table" style="background-color: rgba(0, 0, 0, 0.8);">
            <div data-target="modal.background" data-action="click->modal#closeBackground" class="table-cell align-middle">
              <div class="bg-white mx-auto rounded shadow p-8 max-w-sm">
                  <%= form_with(model: @recipe, url:  made_recipe_recipe_path) do |form| %>
                    <h4>Small Modal Content</h4>
                    <p>You made the recipe. Rate, comment and potentially clone it</p>
                    <%= form.fields_for :made_recipes, MadeRecipe.new do |made| %>
                      <%= made.hidden_field :user_id, value: current_user.id %>
                      <div class="form-group">
                        <%= made.label :rating %>
                        <%= made.number_field :rating, min: 0, max: 5, class: "form-control" %>
                      </div>
                      <div class="form-group">
                        <%= made.label :body, "Comment" %>
                        <%= made.text_area :body, class: "form-control" %>
                      </div>
                    <% end %>
                    <div class="flex justify-end items-center flex-wrap mt-6">
                      <button class="btn btn-primary mr-2" data-action="click->modal#unlock">Close</button>
                      <%= form.submit class: "btn btn-primary" %>
                    </div>
                  <% end %>
              </div>
            </div>
          </div>
        </div>
      </div>
Where would i put the modal#close command?
Alex Deering •
I was able to get this working by adding in the commands used in the modal#close to the javascript render file before it renders the partial.  Took a little adjustments as just removing the overflow class doesnt actually remove the style so had to manually set the overflow to allow scrolling again.  But thanks for the point in the right direction.
My Discussions Participating All Discussions
Notifications
You’re not receiving notifications from this thread.