Thanks to all contributors! I am using stimulus and bootstrap. I now want to collapse a bootstrap accordion when the user clicks outside of the accordion. Problem is that the common ‘focusout’ action (and blur) don’t seem to trigger. If i switch the trigger to ‘click’, that works. I am confused. Am…

I ended up solving this with the blur event. However, there are two tricks which were required for me to get blur to work. First, I needed to set the blur capture parameter to true. Then I needed to set the data attribute of the container “tab-index = -1”. If a future reader is trying to do what I …

I’ve never actually added a focusout event listener myself, so I’m not strictly answering your question, but I use useClickOutside from the wonderful stimulus-use collection of composable controllers instead for similar behaviour. Stimulus-Use - A collection of composable behaviors for your Stimulus…

There’s the blur event: [image] Unfocus action? Have you tried the blur event? That event fires when a field loses input focus. There’s also the click@window-> action that you can catch: [image] Hide a popup on clicking outside the popup area …

Yeah, I tried the blur event, but that did not work either. I looked at click@window, it seems to trigger every time the user clicks anything within the site. Is the idea to have a “click” on target and a click@window and then when click@window triggers but “click” does not, we know that the user c…

Wow never seen that library before, looks great! However, I’ll try vanilla event listeners first. Adding more imports as a first response goes against my grain.

[image] Clancy: I do wonder however whether there are speed concerns to triggering an event every time the user clicks a button. It’s a valid concern. But so long as you very quickly issue a return if not applicable (e.g. presence of a class on an element proving it is hidden, which is a sing…

I can absolutely see that and I almost always agree with that sentiment, but stimulus-use is great and I can’t recommend it enough. The library is tiny to begin with, but you can tree-shake as well so the bundle size increase will be minimal. I use useDebounce, useIntersection, useClickOutside and p…

Stimulus has no focusout event trigger? not playing nice with bootstrap?

General

pascallaliberte April 26, 2022, 2:36pm 3

There’s the blur event:

There’s also the click@window-> action that you can catch:

Topic		Replies	Views
Best practices for handling clicks outside element General	7	21182	October 13, 2021
Hide a popup on clicking outside the popup area General	7	20472	April 3, 2019
Modal close if (click mousedown is inside modal & click mouseup is outside) General	6	1525	July 9, 2023
Stimulus-use: useClickOutside and useTransition General	1	336	January 9, 2024
Unfocus action? General	1	4394	February 23, 2019

Stimulus has no focusout event trigger? not playing nice with bootstrap?

Related topics