Table filter dropdown closes when custom filter (flatpickr) is active
Can't seem to figure out why the filter dropdown closes when I click on next/prev button on the flatpickr instance. date-range-picker.blade.php snippet as below:
<x-dynamic-component
:component="$getFieldWrapperView()"
:field="$field"
>
<div
x-data="{ state: $wire.$entangle('{{ $getStatePath() }}') }"
x-ignore
ax-load
x-load-css="[
@js(\Filament\Support\Facades\FilamentAsset::getStyleHref('flatpickr-stylesheet')),
@js(\Filament\Support\Facades\FilamentAsset::getStyleHref('flatpickr-theme-stylesheet')),
]"
x-load-js="[@js(\Filament\Support\Facades\FilamentAsset::getScriptSrc('flatpickr-script'))]"
x-init="
const fp = flatpickr($refs.picker, {
mode: 'range',
showMonths: 2,
dateFormat: 'Y-m-d',
onChange: (selectedDates, dateStr, instance) => {
// update backend value if the range is complete
if (selectedDates.length == 1) {
instance.element.value = null;
}
}
});
"
>
<x-filament::input.wrapper
wire:ignore
suffix-icon="heroicon-m-calendar-days"
>
<x-filament::input
id="{{$getId()}}"
type="text"
x-ref="picker"
x-model="state"
placeholder="Select date range"
/>
</x-filament::input.wrapper>
</div>
</x-dynamic-component><x-dynamic-component
:component="$getFieldWrapperView()"
:field="$field"
>
<div
x-data="{ state: $wire.$entangle('{{ $getStatePath() }}') }"
x-ignore
ax-load
x-load-css="[
@js(\Filament\Support\Facades\FilamentAsset::getStyleHref('flatpickr-stylesheet')),
@js(\Filament\Support\Facades\FilamentAsset::getStyleHref('flatpickr-theme-stylesheet')),
]"
x-load-js="[@js(\Filament\Support\Facades\FilamentAsset::getScriptSrc('flatpickr-script'))]"
x-init="
const fp = flatpickr($refs.picker, {
mode: 'range',
showMonths: 2,
dateFormat: 'Y-m-d',
onChange: (selectedDates, dateStr, instance) => {
// update backend value if the range is complete
if (selectedDates.length == 1) {
instance.element.value = null;
}
}
});
"
>
<x-filament::input.wrapper
wire:ignore
suffix-icon="heroicon-m-calendar-days"
>
<x-filament::input
id="{{$getId()}}"
type="text"
x-ref="picker"
x-model="state"
placeholder="Select date range"
/>
</x-filament::input.wrapper>
</div>
</x-dynamic-component>
