flatpickr via rails importmap not being generated

Question

Attempting to use flatpickr as a UI for setting a date field with Rails 7.0.1 and ruby 3.1. When clicking on the input field, the expected 2 months of calendars is not rendered & in fact, nothing is registered in the browser network tab.

After bin/importmap pin flatpickr rails pinned the library to the cdn in the importmap.rb file:

pin "flatpickr", to: "https://ga.jspm.io/npm:[email protected]/dist/flatpickr.js"

application.js has the initially generated import "controllers".

flatpickr_controller.rb was created in the javascript/controllers directory with

import { Controller } from "@hotwired/stimulus"
import flatpickr from "flatpickr"

export default class extends Controller {
  connect() {
    this.config = {
      enableTime: false,
      dateFormat: 'Y-m-d',
    }
  }
}

The view partial invokes:

<%= form_with model: promo do |f| %>
  <%= f.text_field :date_from, placeholder: t(".select"), data: { controller:  "flatpickr" } %>
<% end %>

while the controller sets

    @promos = Promo.up_comings(60)
    @promo = Promo.new
    @next_promo = Promo.next
    @dates_to_disable = @promos.pluck(:date_from)

Why is the calendar not rendering?
I am also confused as to where to place the different flatpickr options: in the controller, or straight into the form date element.

Answer 1

The issue is related to support for Stimulus 3. Pin as follows:
bin/importmap pin stimulus-flatpickr@beta

Also reference some css source, such as to the latest version
<link rel="stylesheet" href="https://ga.jspm.io/npm:[email protected]/dist/flatpickr.min.css">
otherwise the input field will be deemed as readonly...