LiveView unexpected logic to load JS Hooks from a simple if and form in a page

Hello, I load an external JS lib for editing text (https://quilljs.com), but I found a bug in my code which can be fixed very easy but I don’t know why it has this behavior .

If I use the following code I have no problem to load this editor and it works for me very good, please see this code:
<div class="col-sm-3 create-category-tools-items" id="nonMainCategoryTools" >
    <%= if @options_menu do %>
        <%= for {item, color} <- Enum.zip(more_options_menu_list(), Stream.cycle(["#e83e8c", "#007bff"])) do %>
            ......
        <% end %>
    <% end %>
</div>

and my form code:

<form action="">
    .....
    <div class="col-sm-12 editor-diver" phx-update="ignore">
    <div id="editor" phx-hook="Editor" class="bw"></div>
    </div>
    <div class="form-error-tag">
        <%= error_tag f, String.to_atom(form.type) %>
    </div>  
</form>

but, if I change top code to this, I mean change if position !!

<%= if @options_menu do %>
    <div class="col-sm-3 create-category-tools-items" id="nonMainCategoryTools" >
        <%= for {item, color} <- Enum.zip(more_options_menu_list(), Stream.cycle(["#e83e8c", "#007bff"])) do %>
            ......
        <% end %>
    </div>
<% end %>

after this, you can’t see the editor in a page just you see the normal html dive not DOM converted to text editor you want like this:

wrong if position:

right if position:

it should be noted, at first time I load all the dive without new html element like pressing red button it is okey, but if pressing that and add or delete the div, it dosent work for me and add an empty space, and please consider it, I just delete or add new elements which have nothing to do with each other, They are separate

Thanks

LiveView seems to be heavily dependent on the id, whole the project, main html element and the other parameters

<div id="nonMainCategoryTools">
  <%= if @options_menu do %>
      <div class="col-sm-3 create-category-tools-items">
          <%= for {item, color} <- Enum.zip(more_options_menu_list(), Stream.cycle(["#e83e8c", "#007bff"])) do %>
              ......
          <% end %>
      </div>
  <% end %>
</div>

What happens with the following?
It could be that at some point your @options_menu is empty so it does not render inside the if and looses the ID what it was bound to, and when it re-appears it treats it like another ID internally.

At first this element is valued which is options_menu: false in mount. if you are right, What does this have to do with another element in another DIV? they are separated.

Have you checked browser dev tools console for errors? I bet some JavaScript is crashing because you moved the if and that is why editor won’t be initialized.

unfortunately I have no error anywhere, for fixing this problem I added uniq id to each div top and bottom of my hook html, and it works now

1 Like