After live_redirect form does not throw phx-change

Question

I have a problem with handling phx-change on a form in LiveView. I am creating a search field for filtering a list of objects. The field also has a reset button. It looks like this:

<form phx-change="search-change" phx-submit="search-change">
  <input type="text" name="search" value="<%= @search_list %>" placeholder="Search..." phx-debounce="500" />
  <button type="button" phx-click="search-change" phx-value-search="">X</button>
</form>

The search field handler is in liveview, not in a liveview component. Handler is implemented this way:

@impl true
def handle_event("search-change", _, socket) do
  IO.inspect("Searching...")
  {:noreply, socket}
end

Everything works as expected when I start from the page or refresh where the list of objects and search field are. But when I live_redirect to another page and then live_redirect back, the form does not throw events anymore. The reset button still works and throws events. What could be the issue here?

Answer 1

I think it is not about solution of your problem in general, but try to separate things first.

For example, you phx-submit, phx-change, phx-click and all them is events and you calling all of that events by similar name which is search-change. I think it's about basic pattern matching and it's hard to check where's what located.

Try to make your code clean first then problem with live_redirect would be solved together

Answer 2

I found the solution. The form was inside the tbody tag inside table, and that was causing the bug. Moving the form outside fixed it.