Discussion on: Tailwind Enter/Leave Transition Effects with Stimulus.js

[Mike McCall]

For sure! That's a really cool solution! I agree that handling clicks outside is important. I didn't go down that road because it strayed from the purpose of the article and some UI's don't implement it. ie. npmjs.com.

FWIW I am/was doing something like this, a pattern I see in React.

import {Controller} from "stimulus"
import {leave, toggle} from 'el-transition';

export default class extends Controller {
    static targets = ["menu", "button"]

    handleClickOutside(event) {
        const menuClicked = this.menuTarget.contains(event.target)
        const buttonClicked = this.buttonTarget.contains(event.target)
        const hidden = this.menuTarget.classList.contains('hidden')

        if (!menuClicked && !buttonClicked && !hidden ) {
            leave(this.menuTarget)
        }
    }

    connect() {
        document.addEventListener('click', this.handleClickOutside.bind(this));
    }

    disconnect() {
        document.removeEventListener('click', this.handleClickOutside.bind(this));
    }

    toggleMenu() {
        toggle(this.menuTarget)
    }
}

[Andy Peters]

Heck yah, that works great! Thanks for following up.

[Dmitrii Amelchenko]

First, thanks for a good post. And, i believe, you can doing something like

data-action="click->dropdown#toggleMenu click@window->dropdown#hideMenu"

hideMenu(event) {
    const buttonClicked = this.buttonTarget.contains(event.target)

    if (!buttonClicked) {
      leave(this.menuTarget)
    }
  }