Prevent Select2 from Flipping the Dropdown Upward

Prevent select2 from flipping the dropdown upward

Modifying the plugin is not preferred as you mention. I had a similar issue and couldn't find an way to use select2 options to force the dropdown to stay below. The solution I ended up with is the following:

$("#mySelect2").select2({ ...options... })
    .on('select2-open', function() {

        // however much room you determine you need to prevent jumping
        var requireHeight = 600;
        var viewportBottom = $(window).scrollTop() + $(window).height();

        // figure out if we need to make changes
        if (viewportBottom < requireHeight) 
        {           
            // determine how much padding we should add (via marginBottom)
            var marginBottom = requireHeight - viewportBottom;

            // adding padding so we can scroll down
            $(".aLwrElmntOrCntntWrppr").css("marginBottom", marginBottom + "px");

            // animate to just above the select2, now with plenty of room below
            $('html, body').animate({
                scrollTop: $("#mySelect2").offset().top - 10
            }, 1000);
        }
    });

This code determines if there is enough room to place the dropdown at the bottom and if not, creates it by adding margin-bottom to some element on the page. It then scrolls to just above the select2 so that the dropdown won't flip.

Select2 drop down is shown up

I found some documentation that might help you

There is "forceabove" param.

You should be able to change it to force it below...

Source : https://github.com/select2/select2/issues/3121

Or

You quand try the dropdown placement. select2 is not working properly when it's inside a Bootstrap modal...

Source : https://select2.org/dropdown#dropdown-placement

select2 - Always dropdown and not dropup

This worked for me:

$.fn.select2.amd.require([
  'select2/selection/multiple',
  'select2/selection/search',
  'select2/dropdown',
  'select2/dropdown/attachContainer',
  'select2/dropdown/closeOnSelect',
  'select2/utils'
], function (MultipleSelection, Search, Dropdown, AttachContainer, CloseOnSelect, Utils) {
  var SelectionAdapter = Utils.Decorate(
    MultipleSelection,
    Search
  );

  var DropdownAdapter = Utils.Decorate(
    Utils.Decorate(
      Dropdown,
      CloseOnSelect
    ),
    AttachContainer
  );

  $('#e1').select2({
    dropdownAdapter: DropdownAdapter
  });
});

jsFiddle

Select2: Prevent Select2 dropdown from getting focused on click

Just write this JS

DEMO HERE

$('.select2-selection').on('click',function(){
    $(this).blur();
});

UPDATE

blur should be blur()

jQuery('.select2-container--disabled').on('click', function () {
    console.log('clicked');
    jQuery('.select2-selection').blur();
});

UPDATE 2:

Its very difficult for me to say that whether or not you can stop getting focused but for ui perspective to show user that it is disabled you can add below css:

.select2-container--default .select2-selection--single .select2-selection__rendered 
{
     cursor:not-allowed;   
}

UPDATED DEMO

Select2 dropdown not appearing in correct place

In the second script the Select2 plugin is re-initiazed with no other options:
$('#hazards').select2();

The correct code should be:

window.addEventListener('DOMContentLoaded', () => {
    

 // Select2
 $("#hazards").each(function() {
      $(this)
        .wrap("<div class=\"position-relative\"></div>")
        .select2({
           placeholder: "Select hazards or search by typing above",
           dropdownParent: $(this).parent()
        });
 });

  let hprops = document.getElementById('hp_codes')
//      document.querySelector('#hazards').addEventListener('change', e => {
// The hazards addEventListener was not firing?
  $('#hazards').on('change', e => {
    let options = e.target.options;
    let hazards = [];
    for (var i = 0, l = options.length; i < l; i++) {
      if (options[i].selected) {
        hazards.push(options[i].value);
      }
    }

...  then if hazards results is XXXX push YYYY

Select2-Allow user to paste multiple values into dropdown from the existing dropdown data

After having a good sleep i managed to understand the select2 better and i came with a solution based on the documentation https://select2.org/tagging.
I customized the createTag function and test if the text pasted already exists or not if it doesn't exist than i prevent the creation of new tag.

Code :

$(function() {
        //Initialize Select2 Elements
        $('#UsersTo').select2({

            tokenSeparators: [',', ', ', ' '],
            tags: true,
            createTag: function(params) {
              var length = $('#UsersTo option').filter(function() { 
                    return $(this).text() === params.term; 
                }).length;
              if (length == 0) {
                // Return null to disable tag creation
            return null;
            }

            return {
              id: params.term,
              text: params.term
            }
        }

        })
        

    });

---

Related Topics