What’s the best approach to allow an external javascript library in LiveView after initial mount?
Currently it only works on first HTTP mount. And after any socket update, it’s stop.
The idea it’s to enable side menu or dropdown features like those in Flowbite.

Currently our side menu is a Phoenix.Component with a child Phoenix.Component per section.

We tried phx-update="ignore".

DROPDOWN

For dropdown, we did via phx-hook and it’s working.

function changeDom(obj) {
  let dropdownId = obj.getAttribute("data-dropdown-toggle");
  let dropdownObj = document.getElementById(dropdownId);
  let options = {
    placement: "bottom",
    onHide: () => {
      // console.log("dropdown has been hidden");
    },
    onShow: () => {
      // console.log("dropdown has been shown");
    },
  };
  let newDropdown = new Dropdown(dropdownObj, obj, options);
}

const navDropdown = {
  mounted() {
    let obj = this.el;
    changeDom(obj);
  },

  updated() {
    let obj = this.el;
    changeDom(obj);
  },

  destroyed() {},
};

export default navDropdown;

SIDE MENU

For side menu dropdown, we did via phx-hook and it’s working.

HEEX

    <ComponentsCompany.side_menu
      locale={@locale}
      token={@token}
      socket={@socket}
      section="users"
      section_item="users-profile"
    />

    <button
      id="myId"
      ...
      phx-hook="sidemenu"
      ...
    </button>

SELECT

For multiple select, we did via phx-hook and it’s working.

HEEX

            <%= select(f, :data_gender, Locale.choose_gender(@locale),
              value: CommonUI.data(@changeset, [:data, "gender"]),
              name: "user[data][gender]",
              class: "form-live-select-input",
              "phx-hook": "select",
              autocomplete: "new-gender"
            ) %>

HOOK

const slimSelect = {
  mounted() {
    let opts = finalOpts(this);
    new SlimSelect(opts);
  },

  updated() {
    let opts = finalOpts(this);
    new SlimSelect(opts);
  },

  destroyed() {},
};

export default slimSelect;