useClickOutside: Documentation Maybe Unclear?

[firrae]

Hi there, maybe I'm doing something wrong but when I try to use the event example in the docs here, I can't seem to get it to work. I've changed modal to the name of my controller and tried giving it a custom prefix. Below is my implementation in my ERB template:

data-action="header-menu:click:outside->header-menu#close"

And my controller:

// header_menu_controller.js
import { Controller } from 'stimulus';
import { useClickOutside } from 'stimulus-use';

export default class extends Controller {
    connect() {
        useClickOutside(this)
    }

    expandMobileMenu() {
        const menu = this.element.querySelector("#mobileMenu")
        const menuOpen = this.element.querySelector("#mobileMenuOpen")
        const menuClose = this.element.querySelector("#mobileMenuClose")
        if(menu.classList.contains("hidden")) {
            menu.classList.remove("hidden")
            menuOpen.classList.add("hidden")
            menuClose.classList.remove("hidden")
        } else {
            menu.classList.add("hidden")
            menuOpen.classList.remove("hidden")
            menuClose.classList.add("hidden")
        }
    }

    expandUserMenu() {
        console.log("user menu");
    }

    clickOutside(event) {
        console.log('close?');
        console.log(this);
        console.log(event);
    }

    close(event) {
        event.preventDefault();
        console.log('close');
        console.log(event)
        console.log(this)
    }
}

Currently only the clickOutside event gets called. When I remove it nothing happens. Other aspects of the controller using default Stimulus work fine, it just seems to be this event based useClickOutside that isn't so far.

Am I just missing something, or is something broken?

EDIT:

I am using the navbar example as my base code to test out Stimulus as seen here: https://tailwindui.com/components/application-ui/navigation/navbars#component-70a9bdf83ef2c8568c5cddf6c39c2331.

[firrae]

OK, in playing with it a bit more after writing out my issue, I tried moving the data-action to the same div element where I defined the controller to use and now it is calling both the close and clickOutside functions in the controller. I guess this just leaves me to not understanding the use case of having this more verbose data-action="header-menu:click:outside->header-menu#close" style? I had assumed it could be used to be put on different elements so it would return an event for that element when you click outside the controller parent. Something like this:

<div data-controller='header-menu'>
    <span data-action="header-menu:click:outside->header-menu#close" />
    <span data-action="header-menu:click:outside->header-menu#close" />
</div>

Where when the close function is called it would be handed the element it was attached to for easier managing of hiding elements. So in this case clicking outside the parent div would fire close twice, but with an event holding a single element: the element it was set on.

I guess the intended idea is that each element would have it's own controller and therefore would have it's own clickOutside handler in said individual controller?

[adrienpoly]

Yes the documentation could probably be improved.

with regards to your example

<div data-controller='header-menu'>
    <span data-action="header-menu:click:outside->header-menu#close" />
    <span data-action="header-menu:click:outside->header-menu#close" />
</div>

it doesn't work because the event bubbles up from the root element. So you inner divs cannot directly listen to this event. On solution would be to listen at the document level if you are sure to have only one of those events on this page

<div data-controller='header-menu'>
    <span data-action="header-menu:click:outside@document->header-menu#close" />
    <span data-action="header-menu:click:outside@document->header-menu#close" />
</div>

The primary intent of the events was more to communicate with other controllers. At least this is how I use them....

in your case you might want to have something like this also

clickOutside(event) {
  this.close()
}