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!