Skip to content

How to force an input value in Phoenix LiveView

When a input field is in focus, any changes that are done to the value won't be applied. This is done to avoid changes from the server overwriting the value a user is typing.

However sometimes it is handy to set the value anyway, for example when accepting a query suggestion in a search autocomplete UI.

Hook

Add a hook that reacts on events from the server:

const ForceInputValue = {
mounted() {
this.handleEvent(
"force-input-value",
({ value }) => (this.el.value = value)
);
},
};
let liveSocket = new LiveSocket("/live", Socket, {
hooks: { ForceInputValue },
params: { _csrf_token: csrfToken },
});

Template

Add the hook to the input field:

<input
phx-hook="ForceInputValue"
id="search-input"
value="<%= @query %>"
name="query" />

LiveView

Push an event to the client when you want to force a value on an input even though it is in focus.

def handle_event(
"accept-suggestion",
%{"key" => "ArrowRight"},
%{assigns: %{suggestion: suggestion}} = socket
) do
{:noreply, socket |> push_event("force-input-value", %{value: suggestion})}
end

Sources

  • Inspired by this comment

#PhoenixLiveView
#published

These notes are unpolished collections of thoughts, unfinished ideas, and things I want to remember later. In the spirit of learning in public, I'm sharing them here. Have fun exploring, if you want!
© 2021 by Adrian Philipp