Combining Phoenix LiveView and Tagify: Issues with phx-update="ignore"

Phoenix Forum Questions / Help
, , , ,
1

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!

2

phx-update="ignore" applies only to children of the node having the attribute, but not to the nodes own attributes.

1 Like
3

Thank you for the clarification regarding phx-update="ignore".

Based on your feedback, I updated my template as follows:

<div id="bookmark-tags" phx-update="ignore">
  <input
    id="bookmark-tags-input"
    name="tags"
    value={@bookmark.tags |> Enum.map_join(", ", & &1.name)}
    phx-hook="Tagify"
    type="text"
  />
</div>

This resolved the issue! The value attribute is no longer being overwritten by LiveView, and Tagify is working as expected.

Thank you for your help!