Why is LiveView re-showing a hidden element on every pushed event?

Phoenix Forum Questions / Help
,
1

I have a chat application. There is a hidden, toggleable menu a WYSIWYG editor. The toggleability is pure client-side JavaScript, using .classList.toggle("hidden").

Whenever the chat is updated, the class value is reset to the default visibility. I’ve put phx-ignore on the element, but the problem persists.

I know I could add server-side logic to handle this, but that would add a round-trip for a really simple client-side toggle, so I’d prefer not to do that.

Mostly, I just want to know why this is happening. The element in question isn’t being touched by the diffs, which I can see in the intercepts, and the function to toggle isn’t being executed, which I can see from the logs. What’s actually happening here?

I’ve found some discussion on the issue here: Elixir phoenix LiveView collapsible collapses on update - Stack Overflow - but the suggestion is to use localStorage, which I think is total overkill, and doesn’t explain what’s actually happening.

So, can anybody tell me what’s actually going on here (and hopefully how to avoid it)?

Cheers!

1 Like
2

Putting phx-update="ignore" on the parent of the element in question seems to work.

3

That’s the intention.

From the DOM patching docs

The “ignore” behaviour is frequently used when you need to integrate with another JS library. Note only the element contents are ignored, its attributes can still be updated.

So the class value will reset unless you set it on its parent.