Select2: Uncaught TypeError: Cannot read property 'current' of null

[invot]

    $('select.popLang').on('change', function(){
        $('select.popLang').select2("destroy");
        var sel = $('select.popLang'),
            iAr = [];
        sel.children('option').attr('disabled',false);
        if (sel.hasClass('noEng')) {
            sel.find('option[value="39"]').attr('disabled',true);
        }
        $.each(sel, function(){
        var itm = $(this).find('option:selected').val();
        iAr.push(itm);
        });
        $.each(iAr, function(key, val){
            if (isNum(val)) {
                sel.find('option[value="'+val+'"]').attr('disabled', true);
            }    
        });
        $('select.popLang').select2();
    });

Running this code the first time returns without error. However, after that it returns the error Uncaught TypeError: Cannot read property 'current' of null starting with r.handle in jQuery. Other than this error appearing, everything works. What could be the problem?

[kevin-brown]

This appears to be more of a usage question than a bug report or common feature request. As we continue to keep the Select2 issue tracker geared towards these two areas, bug reports and common feature requests, we are redirecting usage questions to other communities such as the mailing list, IRC, or Stack Overflow.

[epicserve]

@kevin-brown and @invot FWIW, I'm running into this exact same issue with v4.0.2 of select2.

[kevin-brown]

@epicserve I can reopen this ticket once we get some more information and can confirm it's a bug. If you want to reply to this ticket (or open a new one) using the bug report template that would give us all of the required information to allow us to track the issue down.

[epicserve]

I created an abstraction of the issue (https://fiddle.jshell.net/epicserve/vm4181g4/), but I can't seem to duplicate the bug. But in my project it's essentially doing the same thing, weird. Hmmm ...

[ewsindia]

Facing same issue with select2

$("select").change(function () {
        var dropdownidselctor = "#" + $(this).attr("id");
        console.info(dropdownidselctor + " value = " + $(dropdownidselctor).val());
        if ($(dropdownidselctor + " option:first").val().length == 0 && $(this).val().length > 0) {
            $(dropdownidselctor + " option:first").remove();
            $(this).select2();
        }
    });

but if i run this on console $("#someid").select2(); then it doesn't return any error

[mLuby]

Same issue here. Running on chrome console does throw an error for one select2 but not another. Based on #3116 it sounds like dataConnectors are a big mess so try/catching will have to do.

[sgrgala]

I didn't get enough time to look into this issue. But this error seems to be not affecting anything for me. So I have added a simple null check to avoid this error. I have attached the patch.

select2-v4.0.2.patch.zip

[DannyFeliz]

Thanks @sgrgala your patch works like a charm

[isapir]

I'm experiencing the same issue and @sgrgala 's solution fixed it for me as well. IMO his patch should be added to the project -- I honestly can't see any downside for that, but on the upside it will resolve an issue that many of us experience -- even if it's not easy to reproduce.

[jacoblever]

I'm also having this problem and @sgrgala's patch also fixes it for us. It would be great for this to be merged into select2. Nice work @sgrgala :)

[isapir]

I can reopen this ticket once we get some more information and can confirm it's a bug.

@kevin-brown How many users need to write "I am also experiencing this" before you can confirm it's a bug?

[sgrgala]

@kevin-brown Here is the information: We are setting this.dataAdapter to null and we try to access it during change event and it's not been initialized by then. I believe it is some kind of race condition and it triggers the change event before the initialization of dataAdapter which leads to an error.

A quick fix is to add a null check and we need more investigation on why dataAdapter is not initialized.

Another fix is that we can initialize the dataAdapter if it's null and then proceed.

Please advise what can be the best possible approach.

[ghprod]

I use something like this and that error was gone, just wrap it using setTimeout

$element.on('change', function (event) {
  // do something

  // and finally
  setTimeout(function () {
    $element.select2({
      data: someArrayData
    })
  })
})

[isapir]

So of course I forgot about this issue, and tried to update to select2 v4.0.3. I spent an hour trying to figure out the issue, only to find that it was this same issue again.

Unfortunately, @sgrgala 's fix which works for 4.0.2 does not work for 4.0.3, so I ended up reverting to 4.0.2

Funny thing... I was thinking today that I have an extra hour to kill and didn't know what to do with it. Oh wait. No, I didn't.

[hakunin]

Guys, I have figured out the workaround and the issue in my case.

I am using select2 in a react wrapper and the problem appears because during onChange callback, the component would be re-rendered and Select2 didn't like that.

The fix for me was to add setTimeout to offset the input manipulation (even though it was properly destroyed and re-initialised).

[ryanpcmcquen]

+1

[CurlyBraceTT]

Replace 'change' subscription with specific 'change.select2' helped in my case

[Sofoklis1]

Replace:
$("select").change(function () {
...
});
with:
$("select").on("select2:select select2:unselecting", function () {
...
});
It worked for me with no errors.

[cdric0701]

Thanks @Sofoklis1 it worked perfectly

[circle314]

I can confirm that the solution by @ghprod works perfectly in v4.0.3, even with the setTimeout function having essentially a zero value (this is the default value for "delay" if omitted as the second argument of the function).

[ImAbhishekTomar]

Hello, I am facing same issue in select2 4.0.3 (select2.full.js)

i am resolved this issue using below fix.

Replace - Line 4808

 Defaults.prototype.reset = function () {
    function stripDiacritics (text) {
      // Used 'uni range + named function' from http://jsperf.com/diacritics/18
      function match(a) {
        return DIACRITICS[a] || a;
      }
          return text.replace(/[^\u0000-\u007E]/g, match);
    }

With -

Defaults.prototype.reset = function () {
    function stripDiacritics (text) {
      // Used 'uni range + named function' from http://jsperf.com/diacritics/18
      function match(a) {
        return DIACRITICS[a] || a;
      }

     // add if condition for checking null in text if text is null then return empty string
      if (text != null) {
          return text.replace(/[^\u0000-\u007E]/g, match);
      }
      return "";
    }

This patch is working for me in * Select2 4.0.3

[irowbin]

@jackryu Thanks.

[hybridwebdev]

Can confirm that @Sofoklis1 solution worked. I transformed:
$(ele).on('change', function(){}
to
$(ele).on('select2:select select2:unselecting', function(){}
and the error I was getting stopped. I believe that people having this issue are simply binding to the select2 element improperly/before it's ready and thus what the issue is.

[javierpomachagua]

@Sofoklis1 thanks! It works!

[sinneren]

select2:select select2:unselecting

Works before you delete value (clear cross clicking), after you have new error: "Cannot read property 'query' of null"

[sovilleda07]

select2:select select2:unselecting

Works before you delete value (clear cross clicking), after you have new error: "Cannot read property 'query' of null"

I solved the problem by changing
select2:select select2:unselecting
to
select2:select select2:selecting