Hi all, hope everyone is safe. I am looking for some help with phoenix liveview
This is a weird behaviour, here.
I have a form and inside that I am using stateful live component(to select few options through a modal before it returns data back to parent). After the selections are done in that component send_update is called to the parent component to close the modal(child) and save some data into parent component assigns. Everything is working fine, except that the form in parent component is being auto submitted after child calls send_update and after the update function inside parent. Expected behaviour after update function is that the form should not be auto submitted and it should just store values from child component inside the assigns and stop there.
Parent component
def update(data, socket) do
{:ok, assign(socket, selected_things: data_from_child)}
end
def render(assigns) do
~L"""
<%= f = form_for @changeset, "#", [as: :form, phx_change: :validate, phx_submit: :save, phx_target: @myself %>
<%= label f, ....
<%= select f, ....
<%= if @active_modal do %>
<%= live_component @socket, ChildComponent , id: "someid" %>
<% else %>
<div>...</div>
<% end %>
<%= submit "Save" %>
"""
end
Child component
def handle_event("send_data_to_parent", _params, socket) do
send_update(
ParentFormComponent,
id: "parent form id",
data_to_store_in_parent: data_in_child
)
{:noreply, socket}
end
def render(assigns) do
~L"""
<div>
......do some selections here and save them in this component state
Then on click of save button, send the required data to the parent component through `send_update`
<button class="" phx-click="send_data_to_parent" phx-target="<%= @myself %>">
Save
</button>
</div>
"""
end
