It sounds like the issue is related to how Livewire handles DOM updates, especially when using <input list="..."> with a <datalist>. When Livewire re-renders the component, it may not properly remove the modal from the DOM if the datalist or input is interfering with the DOM diffing process.
Here are some steps and solutions to try:
1. Use wire:key for Unique Elements
Livewire sometimes struggles with dynamic DOM elements. Assigning a unique wire:key to your modal and input can help Livewire track them correctly.
Example:
<input
list="contracts"
wire:model="selectedContract"
wire:key="contract-input"
/>
<datalist id="contracts" wire:key="contracts-datalist">
@foreach($contracts as $contract)
<option value="{{ $contract->name }}">
@endforeach
</datalist>
@if($showAddContractModal)
@include('modals.contracts_quick_add', ['key' => 'add-contract-modal'])
@endif
And in your modal partial:
<div wire:key="{{ $key }}">
<!-- Modal content -->
</div>
2. Ensure Modal is Not Persisted by JavaScript
If you are using JavaScript to show/hide the modal (e.g., Bootstrap, Alpine.js), make sure you are not manually showing the modal after Livewire has removed it from the DOM. Livewire removes the modal blade code, but if JS has already shown the modal, it might persist.
Solution:
Listen for Livewire events and close the modal via JS when $showAddContractModal becomes false.
Example:
<!-- In your blade -->
@if($showAddContractModal)
@include('modals.contracts_quick_add')
@endif
@push('scripts')
<script>
Livewire.on('closeContractModal', () => {
// If using Bootstrap modal
$('#contractsQuickAddModal').modal('hide');
});
</script>
@endpush
And in your Livewire component:
public function closeModal()
{
$this->showAddContractModal = false;
$this->emit('closeContractModal');
}
3. Double-Check for DOM Conflicts
Sometimes, having a <datalist> with the same id as another element or having duplicate IDs can cause issues. Ensure all IDs are unique.
4. Try Removing the Datalist Temporarily
You mentioned that commenting out the datalist fixes the issue. Try simplifying your input/datalist to the bare minimum to see if a specific attribute or value is causing the problem.
5. Use Alpine.js for Modal Control (Optional)
If you want more control, you can use Alpine.js to handle modal visibility, syncing it with Livewire via events.
Summary:
- Use
wire:keyon dynamic elements. - Ensure JavaScript isn't keeping the modal open after Livewire removes it.
- Emit events from Livewire to close modals via JS.
- Double-check for duplicate IDs.
- Simplify your datalist to debug.
If you share your modal code and how you trigger it, I can provide a more tailored solution!