When an option (e.g., banana) is selected from the autocomplete list populated by a datalist, the selected option (banana) is entered into the textbox as expected, but the autocomplete list is still displayed as shown in the attached image.
On the contrary, the list disappears as expected if the event is bound by phx-submit (rather than phx-change, phx-keyup or phx-keydown). Unfortunately, I can't use phx-submit because autocomplete list should be updated as the input is made.
It appears that when an option is selected, and LiveView finishes handling phx-change and updates the page, it re-activates the autocomplete menu. How can I avoid this and make the option list disappear when an option is selected?
<form phx-change="username_change2">
<input id="username2"
type="text"
name="username2"
placeholder="Enter your name"
autofocus
autocomplete="off"
list="usernames"
value ={@username}>
</form>
<datalist id="usernames">
<%= for username <- (["apple","banana","cherry", "peach"]) do %>
<option value= { username }><%= username %></option>
<% end %>
</datalist>
def handle_event("username_change2", %{"username2" => kwd}, socket) do
IO.inspect(kwd, label: "username changed2")
socket1 = assign(socket, username1: kwd, username: kwd)
{:noreply, socket1}
end
