I have a component(non-live) with a form inside of it. When I rerender the parent template the form’s state persists and shows up in the parameters. What’s causing this and is there a way to clear the state without doing so in the frontend?
Component:
<div class="my-2 w-full">
<%= form_for @conn, @route, [method: :get, class: "flex flex-row flex-wrap justify-start w-full items-center"], fn f -> %>
<div class="">
<div class="flex flex-col justify-center">
<%= label f, :search, class: "uppercase text-gray-600 tracking-wide text-xs font-bold mb-2 w-16" %>
<%= text_input f, :search, class: "appearance-none block w-full bg-gray-200 text-gray-700 border border-gray-200 rounded py-3 px-4 leading-tight focus:outline-none focus:bg-white" %>
</div>
</div>
<div>
<button id="filterBtn" type="button">Filter</button>
<div id="myModal" class="modal">
<div class="modal-content flex flex-col">
<span class="close">×</span>
<div id="parent-div">
<div name="child-div", class="search-sub-container">
<div>Where:</div>
<%= select f, :field, ["Select a field..": ""] ++ Enum.map(@model.__schema__(:fields), &{&1, @model.__schema__(:type, &1)}), "data-controller": "search", "data-action": "change->search#getFieldOptions", "data-search-type": "false", class: "search-input" %>
</div>
</div>
<%= hidden_input f, :json %>
<button id="addBtn" type="button" data-controller="search" data-action="click->search#addFilter">+ Add Filter</button>
<button id="applyBtn" type="button" data-controller="search" data-action="click->search#applyFilter">Apply Filter</button>
</div>
</div>
<%= submit "Search", class: "uppercase text-gray-600 md:rounded-lg sm:w-full md:mx-3 md:w-24 text-center p-3 mt-6 h-12 bg-gray-300" %>
</div>
<% end %>
</div>
Template:
<h1>Listing Users</h1>
<%= render FlagShipWeb.App.LayoutView, "_search.html", assigns %>
<table class="airy-table">
<thead>
<tr>
<th>Email</th>
<th></th>
</tr>
</thead>
<tbody>
<%= for user <- @users do %>
<tr>
<td><%= user.email %></td>
<td>
<%= link "Edit", to: Routes.admin_user_path(@conn, :edit, user) %>
<%= link "Delete", to: Routes.admin_user_path(@conn, :delete, user), method: :delete, data: [confirm: "Are you sure?"] %>
</td>
</tr>
<% end %>
</tbody>
</table>
<span><%= link "New User", to: Routes.admin_user_path(@conn, :new) %></span>
Controller Action:
def index(conn, params) do
search_term = get_in(params, ["search"])
queries = SearchManager.get_queries_from_params(params)
users = SearchManager.omnisearch(User, search_term, queries)
render(conn, "index.html", users: users, route: Routes.admin_user_path(conn, :index), model: User)
end
My solution feels.a little hacky and I’m sure there’s a better way.
if params != %{} do
Map.put(conn, :params, %{})
else
conn
end
