I have a modal form that works fine to create a new Detail record via hotwire. Among the fields are flatpickr date field and two flatpickr time fields. If I have validation errors form renders with the errors showing inside the modal, but the flatpickr inputs get reset back to no flatpickr as text fields. How do I make sure it renders the flatpickr fields again when the the validation errors are displayed?

Controller create:

def create
@detail = Detail.new(detail_params)
@detail.user_id = current_user.id

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

create.turbo_stream.erb

<%= turbo_stream.replace "new_detail", partial: "details/form", locals: { detail: @detail } %>

form:

<%= form_with(model: detail, id: dom_id(detail)) do |form| %>
<div class="modal-header">
   <h1 class="h3" id="exampleModalLabel">Post New Detail</h1>
   <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
   <% if detail.errors.any? %>
   <div id="error_explanation">
      <h2><%= pluralize(detail.errors.count, "error") %> prohibited this detail from being saved:</h2>
      <ul>
         <% detail.errors.each do |error| %>
         <li><%= error.full_message %></li>
         <% end %>
      </ul>
    </div>
   <% end %>
   <form>
      <div class="mb-3">
         <label class="form-label">Name</label>
         <%= form.text_field :name, class: 'form-control', id: 'floatingInput1' %>
      </div>
      <div class="mb-3">
         <label class="form-label">Description</label>
         <%= form.text_field :description, class: 'form-control', id: 'floatingInput2' %>
      </div>
      <div class="mb-3">
         <label class="form-label">Date</label>
         <%= form.text_field :detail_date, class: 'form-control', id: 'floatingInput3', data: { behavior: "flatpickr" }   %>
      </div>
      <div class="mb-3">
         <label class="form-label">Start Time</label>
         <%= form.text_field :start_time, class: 'form-control flatpickr1', id: 'floatingInput4', data: { behavior: "flatpickr1" }   %>
      </div>
      <div class="mb-3">
         <label class="form-label">End Time</label>
         <%= form.text_field :end_time, class: 'form-control flatpickr2', id: 'floatingInput5', data: { behavior: "flatpickr2" }   %>
      </div>
</div>
<div class="modal-footer">
<%= form.submit class: 'btn btn-primary' %>
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
</div>
</form>
<script>
   $( '.flatpickr1' ).flatpickr({
     enableTime: true,
     noCalendar: true,
     dateFormat: "H:i",
     time_24hr: true
   });
   $( '.flatpickr2' ).flatpickr({
     enableTime: true,
     noCalendar: true,
     dateFormat: "H:i",
     time_24hr: true
   });
</script>
<% end %>

CodePudding user response：

I think your issue is that you're calling flatpickr inside a script tag. It would be better to move those calls into a Stimulus controller (which is meant to integrate with Turbo), or inside of a Turbo event listener. Basically this is just a timing issue, and there are Turbo-specific ways to tell the page to load JS at the right timem.

The Stimulus controller would be very simple. Something like:

new controller file, e.g. test_controller.js

import { Controller } from "stimulus"

export default class extends Controller {
  connect() {
    // call flatpickr here
  }
}

then in form.html.erb, add the stim controller to the form element

<form data-controller="test">
  ...
</form>

The event listener would be similar to what's mentioned in this question.

 document.addEventListener("turbo:before-fetch-response", function (e) {
   // call flatpickr here
 })