Get jquery error Uncaught RangeError: Maximum call stack size exceeded

Question

$(document).on("focus",'.select2-selection--multiple',function(){
    $(".select2-search__field").focus();
}); 

when i am using this getting error "too much recursion" in firefox and "Uncaught RangeError: Maximum call stack size exceeded" in chrome.

<span class="select2 select2-container select2-container--default" dir="ltr" style="width: 100px;">
    <span class="selection">
        <span class="select2-selection select2-selection--multiple" role="combobox" aria-autocomplete="list" aria-haspopup="true" aria-expanded="false" tabindex="0">
            <ul class="select2-selection__rendered">
                <li class="select2-search select2-search--inline"><input class="select2-search__field" type="search" tabindex="-1" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" role="textbox" placeholder="" style="width: 0.75em;"></li>
            </ul>
        </span>
    </span>
    <span class="dropdown-wrapper" aria-hidden="true"></span>
</span>

this is my html actually i am using selec2 plugin and try to focus on that
when i press tab.

Answer 1

As Rory mentioned, you have to prevent the event from bubbling up:

$(document).on("focus", '.select2-search__field', function(event) {
  event.stopPropagation();
});

$(document).on("focus", '.select2-selection--multiple', function() {
  $(".select2-search__field").focus();
});