Cookies in Phoenix LiveView not taken into account only after the second F5 refresh

Questions & Help Questions
, ,
11

You need to use a phx-hook to look for the element since it may or may not exists at DOMContentLoaded time as LiveView is patching the DOM and controlling the lifecycle of elements, so try something like:

<div id="user-tips" phx-hook="Tips">
    Drink more water and you will feel better.
    <button onclick="hideTips()">Hide tips</button>
</div>

let Hooks = {}
Hooks.Tips = {
  mounted(){
    let showTips = !!Cookies.get("showTips")
    alert(showTips)

    if(showTips){
      this.el.style.display = "block"
    } else {
      this.el.style.display = "none"
    }
  }
}
 
let liveSocket = new LiveSocket("/live", Socket, {
  hooks: Hooks, params: {_csrf_token: csrfToken}
})