Hooks running before mount under certain conditions

Phoenix Forum Questions / Help
, ,
1

So I have a hook which doesn’t run after using <.link navigate> after the first time. Seems like a bug?

To recreate:

  1. Have an index page with <.link navigate={ ~p"/somewhere/#{item}"}><%= item %></.link>
  2. Click on the link and all events fire correctly.
  3. Hit the back button to go back to the index page.
  4. Click on the same link (or any other link, it doesn’t matter). The mount is fired after the hook it appears and it goes into catching the exception.
Hooks.ModalCloseAway = {
    mounted() {
        function hideOnClickOutside(element) {
            const outsideClickListener = event => {
                try {...  } // this tries to do things to document.getElementById(element.id + '_toggle')
                catch(e) {
                    console.log("outside click listener can't find " + element.id + "_toggle")
                }
            }
            if (document.readyState === 'complete') {
                document.addEventListener('click', outsideClickListener)
            }
        }
        hideOnClickOutside(this.el)
    }
}

Other than using <.link href={}> instead of <.link navigate={}>is there any other workaround?

2

Try removing the listener using the “destroyed” callback so you don’t have multiple listeners created. That could be making things buggy.

1 Like