I have a filter controller that has different filtering controllers inside. The filtering controllers can submit the filter controller. I have two types of filter a date range using flatpicker and a users list that is a regular stimulus controller. each filter also provides a mechanism to "clear" its selection, after clearing they submit the form to update the results.
The issue I am seeing is that the date range picker controller does not recognize the outlets whereas the people filter controller does.
The following code is simplified and probably missing closing brackets.
Date range controller
import { Controller } from "@hotwired/stimulus";
import Flatpickr from 'stimulus-flatpickr'
import { Spanish } from "flatpickr/dist/l10n/es.js";
import { english } from "flatpickr/dist/l10n/default.js";
export default class extends Flatpickr {
static outlets = ["filter-form"]
static targets = [....]
.....
clearAll(evt) {
evt.preventDefault();
this.fp.clear();
const formattedDates = this.fp.selectedDates.map(date => {
return date.toLocaleDateString('en-GB', {day: 'numeric', month: 'short', year: 'numeric'}).toLowerCase();
});
this.defaultStartDateTarget.value = this.checkDateValue(formattedDates[0]);
this.defaultEndDateTarget.value = this.checkDateValue(formattedDates[1]);
if (this.hasFilterFormOutlet) {
this.filterFormOutlet.submit(evt);
}
}
There is another stimulus controller that declares the same outlet as the datepicker. Is for a list of checkboxes that upon selecting one, it will submit the form:
I have a filter controller that has different filtering controllers inside. The filtering controllers can submit the filter controller. I have two types of filter a date range using flatpicker and a users list that is a regular stimulus controller. each filter also provides a mechanism to "clear" its selection, after clearing they submit the form to update the results.
The issue I am seeing is that the date range picker controller does not recognize the outlets whereas the people filter controller does.
The following code is simplified and probably missing closing brackets.
Date range controller
The HTML is the following:
The HTML form (the filter stimulus controller) is defined like this:
There is another stimulus controller that declares the same outlet as the datepicker. Is for a list of checkboxes that upon selecting one, it will submit the form: