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;
