0

I have a delegated focus event handler that is being triggered twice, can someone kindly tell me why this is happening? It will only be triggered once if the on click event handler is used instead.

$(document).on('focusin', '.select2-selection--multiple', function(event){
                console.log("IN HERE IN HERE");
                console.log(event);
});

Results

enter image description here

Detailed Event Data 1

enter image description here

Detailed Event Data 2

enter image description here

Yeo Bryan
  • 331
  • 4
  • 24
  • This is most likely the same [issue](https://stackoverflow.com/questions/43174996/javascript-click-event-triggers-twice) that I came across a couple years ago with click events. The bubbling of a synthetic event. – Zze Apr 13 '22 at 11:27
  • @Zze took a look at that thread and a recommended solution was to use e.preventDefault() in the event handler. It didnt solve the error in my case though – Yeo Bryan Apr 13 '22 at 11:31
  • IIRC Select2 does all kinds of funny stuff like replacing and adding elements, right? Seems a good possibility this is related to that ... ? We'd need to see a [minimal, complete, and verifiable example](https://stackoverflow.com/help/mcve) to be able to help though. – Don't Panic Apr 13 '22 at 13:45
  • `.select2-selection--multiple` is a `span` so will only receive events from its children. If you `consoole.log(event.target)` you'll see that it's the child element bubbling up. `focus` doesn't bubble up, so you would not get any events. For me, it [fires 3 times](https://jsfiddle.net/bodfwL6p/). – freedomn-m Apr 13 '22 at 14:08
  • I suggest you listen for an "official" event rather than trying to "hack" into the internals of the select2. See [select2 events](https://select2.org/programmatic-control/events). Eg: `select2:opening` – freedomn-m Apr 13 '22 at 14:10
  • @freedomn-m if it doesn't trigger any events due to child element not bubbling up, why are we getting multiple focus events being triggered? – Yeo Bryan Apr 13 '22 at 14:35
  • @freedomn-m i would gladly use select2:closing but it unfortunately doesn't provide me with the data that will allow me to identify what is triggering this closing event. More specifically, whether it is being triggered by selecting of a value in the dropdown or clicking on an area outside of the dropdown or even selecting the select element again – Yeo Bryan Apr 13 '22 at 14:37
  • "*if it doesn't trigger any events due to child element not bubbling up*" - apologies if it wasn't clear : `focus` doesn't bubble, `focusin` *does* bubble, I'm assuming you're using `focusin` on a non-focus element *because* `focus` doesn't bubble. I don't know why it raises multiple events for the same element, that's just how select2 works. – freedomn-m Apr 13 '22 at 14:43
  • "*doesn't provide me with the data that will allow me to identify what is triggering this closing event*" - I really can't show how `focusin` (the opposite of `closing`) would give you this either, nor really why you would need it *triggered by selecting a value* - use `select2:select` *clicking an area outside* - use `select2:close` *select same value*:`select2:unselecting` – freedomn-m Apr 13 '22 at 14:47
  • @freedomn-m I actually tried using focus,focusin and also on click event however it seems that only the on click event was being fired appropriately whilst the others were being fired multiple times over – Yeo Bryan Apr 13 '22 at 14:51
  • Its more of a hack where I assign a value to a variable which I will check in the close event to ascertain if this close event was triggered due to the select event being focused. In which case I will NOT allow the close event to complete as I will be displaying the keyboard to the users I only want the dropdown to close if 1) Value is selected 2) An area outside of the dropdown is clicked 3) The select element was clicked twice without selecting any value – Yeo Bryan Apr 13 '22 at 14:54

0 Answers0