Checkbox does not reset on browser back/forward buttons

I have a data table with a checkbox column whereby each checkbox is bound to the $selected property in the associated Livewire class.

@forelse($tasks as $task)
	<tr wire:loading.class.delay="opacity-50" wire:key="tr-{{ $task->id }}">
        <td><input type="checkbox" wire:model.live="selected" id="{{ $task->id }}" name="{{ $task->id }}" value="{{ $task->id }}"></td>
		<td><a href="{{ route('tasks.show', ['task' => $task->id]) }}">{{ $task->task_name }}</a></td>
	</tr>
@empty
	...
@endforelse

public $selected = [];

I can see that the $selected property is correctly updated with the selected tasks when outputting @json($selected).

However I have the following issue:

I select 1/multiple task checkboxes.
I then click a hyperlink to visit the task show page (separate page).
Clicking the browser back button, the $selected array is empty (as expected) , however the selected checkboxes are still checked.
If I manually refresh the page in the browser then everything resets as expected.

I can set autocomplete="off" against the HTML checkbox, but this doesn't feel right and unsure why the checkboxes are not unchecked matching the $selected property which is now an empty array?

Snapey

1 year ago

Level 122

just wire the checkbox. Do not also set the value. The checked or unchecked state will reflect the state in the component. As it is, you are trying to set state on both sides at once.

This may not solve your issue, but it will prevent other odd effects.

The problem is that when you press back, the browser renders the page in its last state without even calling the component.

Please or to participate in this conversation.