Hi 
Reviving this post a little bit.
I am currently building a form that contains one auto-complete input (but without using the HTML5 <datalist /> as I want to style the list).
I managed to build it and generate the list of autocompletions using phx-change binding on my form.
Now, I would like to extract this autocomplete input so I can re-use it in other forms.
So far, I have created a livecomponent for it, and pass the form builder struct to this new component. I have also writen a hooks to push an event to the live component on input to refresh the suggestion list.
My issue is that while this work well, the change of the parent form also triggers. And there is a concurrent update of the DOM which leads to super janky experience (the form blinks).
Is there a way to prevent the form to run phx-change , from the autocomplete component ? I tried to use e.preventDefault() and e.stopPropagation() in my hook but it didn’t work.
I know there is a way to pattern match on the target in the handle_even("validate..") for my form component, but this feels wrong to me. The parent should have to be aware of the input to “ignore” from a child component. This seems private to the autocomplte component.
Thanks in advance.
EDIT
I might have something quite elegant, using Live components block.
- The Form component (where the form
f lives) now calls:
<%= live_component @socket, AutocompleteComponent, id: :some_id %>
<%= hidden_input f, :item_id, value: @selected_item.id %>
<% end %>
- The AutocompleteComponent basically does:
<%= if @selected_item do %>
<%= @inner_content.(selected_item: @selected_item) %>
<% end %>
<% text_input :unused_form_id, :query, phx_keyup: "search_item" %>
<%= unless @selected_item do %>
<%= for item <- @results do %>
<a phx-click="select_item" phx-value-id="<%= item.id %>" phx-target="<%= @myself %>">
<%= item.name %>
</a>
<% end %>
<% end %>
The logic of searching and selecting item is now self-contained into the AutocompleteComponent, exactly what I wanted.
Thanks for you time if you read this post 
