I’m trying to integrate Tagify with Phoenix LiveView, but I’m encountering issues even when using phx-update="ignore"
.
Here is my setup:
import Tagify from "@yaireo/tagify";
export const TagifyHook = {
mounted() {
this.tagify = new Tagify(this.el, {
whitelist: ['foo', 'bar', 'baz']
});
this.tagify.on("add", e => {
this.pushEvent("add_tag", { tag: e.detail.data.value });
});
this.tagify.on("remove", e => {
this.pushEvent("remove_tag", { tag: e.detail.data.value });
});
},
}
And in my template:
<input
id="bookmark-tags"
name="tags"
phx-update="ignore"
value={@bookmark.tags |> Enum.map_join(", ", & &1.name)}
phx-hook="Tagify"
type="text"
/>
I thought that adding phx-update="ignore"
would prevent LiveView from updating the value
attribute, but it seems that LiveView still overwrites it. The initial value is set correctly, but subsequent updates from LiveView cause the value
attribute to be overwritten. Tagify doesn’t expect the value
attribute to be updated externally, which causes it to break.
Has anyone successfully combined Phoenix LiveView and Tagify? What additional steps or configurations are required to make this work seamlessly? Any help or pointers would be greatly appreciated!