# Stimulus-use: useClickOutside and useTransition

**URL:** <https://discuss.hotwired.dev/t/stimulus-use-useclickoutside-and-usetransition/5546>\
**Category:** General\
**Created:** [January 5, 2024, 8:51pm UTC](https://discuss.hotwired.dev/t/stimulus-use-useclickoutside-and-usetransition/5546 "2024-01-05T20:51:21Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![dam13n](https://yyz1.discourse-cdn.com/flex027/user_avatar/discuss.hotwired.dev/dam13n/32/3583_2.png) [@dam13n](https://discuss.hotwired.dev/u/dam13n)\
**Post date:** [January 5, 2024, 8:51pm UTC](https://discuss.hotwired.dev/t/stimulus-use-useclickoutside-and-usetransition/5546/1 "2024-01-05T20:51:22Z")

</div>

Have these both on a dropdown, but am running into an issue. Steps are:

- click button for dropdown which runs the transition toggle
- useTransition is hit first and starts to shows dropdown menu (no longer hidden)
- useClickOutside (with onlyVisible: true) then fires but because menu has already started to show, it then fires and closes the menu instantly

Is there a best practice solution here?

---

<div class="post-metadata">

**Author:** ![dam13n](https://yyz1.discourse-cdn.com/flex027/user_avatar/discuss.hotwired.dev/dam13n/32/3583_2.png) [@dam13n](https://discuss.hotwired.dev/u/dam13n)\
**Post date:** [January 9, 2024, 5:50pm UTC](https://discuss.hotwired.dev/t/stimulus-use-useclickoutside-and-usetransition/5546/2 "2024-01-09T17:50:47Z")

</div>

So I got it to work by using the enterActive, enterTo, and enterFrom options to apply a class that useClickOutside could watch for. In the end though had to abandon because useTransition doesn’t support multiple targets and am using el-transition now instead.