Dropdown + Select2 click inside select closes dropdown...

[borovez]

Hello, I am new to using Select2.

I am trying to put this select into a drop down and allow someone to search for users.
The problem is when I click anywhere inside the search results, like the input text field or the empty search results area, it will close my dropdown, but keep the select results dropdown open...
Example:
Before clicking inside the input box:

After clicking inside the input box:

But, when I click a search result item like a href link type item in the results drop down, it does not close my main drop down....

I am trying to put in e.preventDefault, e.preventPropagation everywhere I can but I can't seem to get it to work!

Please tell me what im missing here...

<select class="search-contact" style="width:180px" name="findContact" id="findContact"
   data-tags="true">

  $(".search-contact").select2({
    minimumInputLength: 2,
    tags: [],
    placeholder: "Search for a member",
    ajax: {
        url: "./php/testing/module/contact-drop-module/php/user-name-search.php",
        dataType: 'json',
        type: "POST",
        async: false,
        quietMillis: 50,
        data: function (term) {
            return {
                'term': term.term //search term
            };
        },
        error: function(data){
          alert("ERROR");
        },
        processResults: function (data) {
            return {
                results: $.map(data.users, function(index, val) {
                    return {
                        id: index,
                        text: index,
                        name: index,
                        slug: index
                    }
                })
            };
        }
    }
  });

[kevin-brown]

Most likely this is because the dropdown is not trapping the click event, which is making its way up to the body and causing the popover to close itself.

You can usually override a method on the other component such that it won't try to automatically close the popover when Select2 fires off events. Without knowing what you are using for the popover, I can't help figure out what method needs to be overridden.

[borovez]

Thank you for replying.
I am using the free dropit script for drop downs. So, I simply have a div with the class .contacts-dropdown, and .drop-menu. The drop-menu class triggers the drop down, while the second piece of code below initializes the select2 search. Please let me know if you need any other information.

    $('.drop-menu').dropit({
        action: 'click'
    });

  $('.contacts-dropdown').on('click', function(){
    initSearchContact(searchContact);
  });

  function initSearchContact( select)
  {
    select.select2({
      minimumInputLength: 2,
      tags: [],
      placeholder: "Search for a member",
      ajax: {
          url: "./php/testing/module/contact-drop-module/php/user-name-search.php",
          dataType: 'json',
          type: "POST",
          async: false,
          quietMillis: 50,
          data: function (term) {
              return {
                  'term': term.term //search term
              };
          },
          error: function(data){
            alert("ERROR");
          },
          processResults: function (data) {
              return {
                  results: $.map(data.users, function(index, val) {
                      return {
                          id: index,
                          text: index,
                          name: index,
                          slug: index
                      }
                  })
              };
          }
      }
    });

    $(".search-contact").select2("val", "");
  }

[Selion05]

I'm facing the same problem with bootstrap3 dropdown right now. Is there a solution?

[alexweissman]

This appears to be a usage question, rather than a bug report or feature request. Please see our contributing guidelines.

Usage questions should be discussed on the forums instead.

[freescout-helpdesk]

@borovez

// To avoid closing a dropdown
$(".select2-selection").on("click", function(){
    return false; // prevent propagation
});