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

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

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?

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
    })
  })
})

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).

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

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

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

Replace ‘change’ subscription with specific ‘change.select2’ helped in my case

@Sofoklis1 Thank you so much, you solved my issue 4 years later!

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.

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 😃

Thanks @sgrgala your patch works like a charm

I got this issue when I tried to update the data of the select 2 on change of the same select.(it was a multiselect, not sure if that makes any difference.)

I guess the issue lies in that the select is not finished doing something before it starts with updating the data??

the above “solutions” didn’t fix it, or caused some other issues.

//I did something like this...
 $("#your-select").on("change", () => {
    $("#your-select").select2({data:[
        {
            id: 0,
            text: 'enhancement'
        },
        {
            id: 1,
            text: 'bug'
        },
        {
            id: 2,
            text: 'duplicate'
        },
        {
            id: 3,
            text: 'invalid'
        },
        {
            id: 4,
            text: 'wontfix'
        }
    ]});
});

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

@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.