The issue you're experiencing is due to how Livewire handles public properties that are not simple types (like arrays or collections). When you assign a new collection to $this->accounts (with Account::all()->sortBy('displayName')), Livewire serializes and deserializes it between requests. This can cause unexpected re-rendering issues, especially when using collections, and can interfere with other properties (like $showModal) updating as expected.
The root cause:
When you assign a new collection to a public property, Livewire may not properly track changes to other properties in the same request cycle, causing the modal to remain open or not respond to state changes.
Solution
1. Use arrays, not collections, for Livewire public properties.
Convert the collection to an array before assigning to $this->accounts.
2. Update your component methods as follows:
class TestDataListModal extends Component
{
public $showModal = false;
public $accounts = [];
public $buttonText = 'Modal Pop-up';
public function mount()
{
$this->accounts = Account::orderBy('displayName')->get()->toArray();
}
public function showModalPopUp()
{
$this->showModal = true;
}
public function hideModalPopUp()
{
$this->showModal = false;
Log::debug('Hide the modal');
}
public function createNewAccount()
{
// Add a new account (replace with your form data)
$account = Account::create([
'account_number' => 'A-12345',
'account_type_id' => 1,
'first_name' => 'Testy',
'last_name' => 'McTester',
'displayName' => 'Testy McTester',
]);
// Refresh the list of accounts as an array
$this->accounts = Account::orderBy('displayName')->get()->toArray();
$this->hideModalPopUp();
}
public function render()
{
return view('livewire.test-data-list-modal');
}
}
3. Update your Blade to use the correct array keys:
If you use $account['displayName'] instead of $account->displayName in your Blade:
<datalist id="accounts-list">
@foreach($accounts as $account)
<option value="{{ $account['displayName'] }}"/>
@endforeach
</datalist>
Summary
- Always use arrays (not collections) for Livewire public properties.
- Use
->toArray()when assigning Eloquent results to public properties. - Update your Blade to use array syntax.
This will resolve the modal not hiding and ensure your datalist updates as expected.
Extra tip:
If you want to keep using Eloquent collections internally, keep them as private/protected properties, and only expose arrays to the view.
Let me know if you need a more advanced example (e.g., with validation or dynamic form fields)!