I've been trying to implement select2 on my Laravel project with flowbite select input field inside a modal to create a data. Somehow, the select2 doesn't work if I'm using it inside a modal. Below is my modal and form inside it
<div class="w-full md:w-auto flex flex-col md:flex-row space-y-2 md:space-y-0 items-stretch md:items-center justify-end md:space-x-3 flex-shrink-0">
<button
id="addModalButton"
data-modal-target="addModal"
data-modal-toggle="addModal"
type="button"
class="flex items-center justify-center text-white bg-primary-700 hover:bg-primary-800 focus:ring-4 focus:ring-primary-300 font-medium rounded-lg text-sm px-4 py-2 dark:bg-primary-600 dark:hover:bg-primary-700 focus:outline-none dark:focus:ring-primary-800">
<svg
class="h-3.5 w-3.5 mr-2"
fill="currentColor"
viewbox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
aria-hidden="true">
<path clip-rule="evenodd" fill-rule="evenodd" d="M10 3a1 1 0 011 1v5h5a1 1 0 110 2h-5v5a1 1 0 11-2 0v-5H4a1 1 0 110-2h5V4a1 1 0 011-1z" />
</svg>
Add data
</button>
</div>
<!-- Add data modal -->
<div id="addModal" tabindex="-1" aria-hidden="true" class="hidden overflow-y-auto overflow-x-hidden fixed top-0 right-0 left-0 z-50 justify-center items-center w-full md:inset-0 h-modal md:h-full">
<div class="relative p-4 w-full max-w-2xl h-full md:h-auto">
<!-- Modal content -->
<div class="relative p-4 bg-white rounded-lg shadow dark:bg-gray-800 sm:p-5">
<!-- Modal header -->
<div class="flex justify-between items-center pb-4 mb-4 rounded-t border-b sm:mb-5 dark:border-gray-600">
<h3 class="text-lg font-semibold text-gray-900 dark:text-white">
Add New House
</h3>
<button type="button" class="text-gray-400 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm p-1.5 ml-auto inline-flex items-center dark:hover:bg-gray-600 dark:hover:text-white" data-modal-toggle="addModal">
<svg aria-hidden="true" class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
<span class="sr-only">Close</span>
</button>
</div>
<!-- Modal body -->
<form action="{{ route('dashboard.chickenEgg.store') }}" method="POST">
@csrf
<div class="grid gap-4 mb-4 sm:grid-cols-2">
<div class="col-span-2">
<label for="house_id" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">Chicken house</label>
<select id="house_id" name="house_id" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-primary-500 focus:border-primary-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500" required>
</select>
@error('house_id')
<span class="text-red-600">{{ $message }}</span>
@enderror
</div>
<div>
<label for="date" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">Date</label>
<input type="date" name="date" id="date" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-primary-600 focus:border-primary-600 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500" value="{{ old('date') }}" required>
@error('date')
<span class="text-red-600">{{ $message }}</span>
@enderror
</div>
</div>
<button type="submit" class="text-white inline-flex items-center bg-primary-700 hover:bg-primary-800 focus:ring-4 focus:outline-none focus:ring-primary-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-primary-600 dark:hover:bg-primary-700 dark:focus:ring-primary-800">
<svg class="mr-1 -ml-1 w-6 h-6" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10 5a1 1 0 011 1v3h3a1 1 0 110 2h-3v3a1 1 0 11-2 0v-3H6a1 1 0 110-2h3V6a1 1 0 011-1z" clip-rule="evenodd"></path></svg>
Add data
</button>
</form>
</div>
</div>
</div>
I've try the solution from the select2 website where I just need to modify my code to something like this
<div id="myModal" class="modal fade" tabindex="-1" role="dialog" aria-hidden="true">
...
<select id="mySelect2">
...
</select>
...
</div>
...
<script>
$('#mySelect2').select2({
dropdownParent: $('#myModal')
});
</script>
But that code is for Bootstrap, not for Tailwind CSS, particularly Flowbite.
The solution you are using dropdownParent: $('#myModal') is for bootstrap. For tailwind you need to listen to onShow event and then bind the select2.
const $targetEl = document.getElementById('default-modal');
const options = {
onShow: () => {
$('#mySelect2').select2();
},
};
const instanceOptions = {
id: 'default-modal',
override: true
};
const modal = new Modal($targetEl, options, instanceOptions);
<button onclick="modal.show();" type="button">
Toggle modal
</button>