Flatpickr inside of Bootstrap modal can not type in year input - bootstrap-modal

Question

I have a problem with Flatpickr rendering in a Bootstrap modal.
When I open a Flatpickr entry within a modal, everything seems to work fine except for entering a year. When I want to click on the year, the input field does not work.
Thanks for help.
Flatpickr version 4.6.9 and Bootstrap version 5.1.1

Answer 1

In order to use the month and year picker you need to use the Flatpickr option static: true. This way it will not hide behind the modal.
$(document).ready(function() {
const flatpickr_time = $('#flatpickr_time').flatpickr({
//static: position the calendar inside the wrapper and next to the input element*.
static: true
});
});
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/flatpickr/4.6.11/flatpickr.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/flatpickr/4.6.11/flatpickr.min.js"></script>
<div class="container">
<div class="row justify-content-center">
<div class="col-4 m-5">
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">Launch modal</button>
</div>
</div>
</div>
<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<input id="flatpickr_time" style="width:200px;">
</div>
</div>
</div>
</div>

Answer 2

I've had the same issue and while the solution proposed by Crezzur did work, it had some side effects that I didn't want.
I was able to find that the issue was caused by bootstrap being a bit too aggressive with the focus, which means it can be fixed simply by adding bs-focus="false" to your modal.
Example:
<div class="modal" role="dialog" data-bs-focus="false">