Support all Flatpickr actions on input group elements?

[ansonhoyt]

Flatpickr can parse an input group of elements, as in their example flatpickr + external elements.

Flatpickr also binds click handlers for any elements in the input group that with the data-attributes: data-open, data-close, data-toggle, data-clear

I'd like to have a Bootstrap input-group with a (Font Awesome) icon toggle element:

<%= tag.div class: 'input-group', data: { controller: 'flatpickr' } do %>
  <%= form.text_field :held_on, class: 'form-control', data: { target: 'flatpickr.instance' } %>
  <%= tag.span class: 'input-group-append add-on', data: { target: 'flatpickr.toggle' } do %>
    <%= tag.span(icon('fas', 'calendar-alt'), class: 'input-group-text') %>
  <% end %>
<% end %>

I see input-group can be used since https://github.com/adrienpoly/stimulus-flatpickr/issues/35 added an instance target. However, I don't see any other targets. It doesn't look like stimulus-flatpickr supports an element in the group firing these built-in Flatpickr handlers.

Is this something you would be open to adding or accepting a PR for?

If so, does adding targets that mirror Flatpickr (toggle, open, close, clear) seem like the right approach? That would replicate Flatpickr's data-toggle behavior if the target data-target="flatpickr.toggle" exists.

[adrienpoly]

Sure feel free to open on PR on this I will look into it promptly I haven't worked into migrating this package to Stimulus 2.0. The targets that are manually defined by the package uses the old syntax. Not a big issue as this syntax is still supported. Just to say that if you add targets keep them in the old syntax for now

[ansonhoyt]

Thanks Adrien! I'll keep messing around and add a PR if I figure something out.

(I'm pretty green on Stimulus and Flatpickr, so I don't mind if someone beats me to it!)