templates/common/scripts/select2-set-focus-resolver.html.twig line 1

Open in your IDE?
  1. <script>
  2.     function setFocusToSearchTextField() {
  3.         // focus event (ex. tab btn): open the menu
  4.         $(document).on('focus', '.select2-selection.select2-selection--single', function () {
  5.             // do not open menu, if field is disable for editing
  6.             if ($(this).attr('aria-disabled') === "true") {
  7.                 return
  8.             }
  10.             const aria_labelledby_container = this.getAttribute("aria-labelledby")
  11.             // returns more than one for datetime widget (hours and minutes, both container are on the same html lvl)
  12.             // so the only way how to detect the correct one is to use data from attribute
  13.             let menu_containers = $(this).closest(".select2-container").siblings('select:enabled')
  14.             if (menu_containers.length > 1) {
  15.                 menu_containers.each(function(){
  16.                     // find according container
  17.                     if (aria_labelledby_container.includes(this.id)) {
  18.                         $(this).select2('open')
  19.                     }
  20.                 })
  21.                 return
  22.             }
  23.             menu_containers.select2('open')
  24.         })
  25.         // menu open event: focus on search field if such one exists
  26.         $(document).on('select2:open', function (e) {
  27.             window.setTimeout(function() {
  28.                 $(".select2-container--open .select2-search__field").get(0).focus();
  29.             }, 200);
  30.         });
  31.     }
  32. </script>