Steps:
- email input component is rendered for the first time, the email input field receives focus
- I click somewhere outside of the component, NOT the button, the email input field loses focus (blur)
- email input field does not have focus, blur event is in the past.
- I click the next button, blur-handler receives
%{"value" => "Next"}
Is this expected behaviour?
I would expect the value in the blur-handler always to be that of the email input field.
In my mind the value of the button should be completely unrelated to the “blur”, because the button “click” did not cause the “blur”.
Render component:
def render(assigns), do: ~L"""
<div id="<%= assigns.id %>">
<ul>
<li><%= email_input(assigns) %></li>
<li><%= next_button(assigns) %></li>
</ul>
</div>
"""
defp email_input(assigns), do:
Phoenix.HTML.Tag.tag :input, [
type: "email",
name: "email",
value: assigns.state.value,
autofocus: true,
"phx-blur": "blur",
"phx-target": assigns.myself
]
defp next_button(assigns), do:
Phoenix.HTML.Tag.tag :input, [
type: "button",
value: "Next",
"phx-click": "next",
"phx-target": assigns.myself
]
Blur handler:
def handle_event("blur", %{"value" => expect_email_input_value}, socket) do
IO.inspect expect_email_input_value, label: "blur" # <-- blur: "Next"
{:noreply, socket}
end
How does the button value end up in my email input field blur handler ?