Uncaught TypeError: Cannot read property 'current' of null

[hakunin]

Hi, I am not sure if I am using it wrong, but this is what I get when selecting any option.

    this.$element.on('change.select2', function () {
      self.dataAdapter.current(function (data) {
        self.trigger('selection:update', {
          data: data
        });
      });
    });

[hakunin]

I found that opthers have the same erros as I do, not sure were to begin to fix it though: https://github.com/select2/select2/issues/3992

Any ideas?

[hakunin]

So I figured out the issue. Select2 doesn't like when its being re-rendered from react during the onChange callback.

I had to put a setTimeout there to offset the callback and now it works without throwing errors.

It might be worth doing that in the wrapper itself, or working it around as its most likely going to happen to all users.

[rkit]

Can you show full example code code for reproducing that?

[flynfish]

@hakunin can you provide more info on where you put the setTimeout? I'm also getting the same error

[flynfish]

FYI, I never had this issue until I updated from 0.6.1 to 1.0.3, and when that happened the select2 library went from 4.0.2 to 4.0.3.

[flynfish]

More info:

1.0.0 is the latest version that works without getting the error. 1.0.1 didn't get there error either, but it wasn't really working correctly so I think there was a bug with that version?

[hakunin]

@flynfish in the onChange callback. Upon changing it, the select2 in my example is re-rendered which I is likely the reason.

[flynfish]

@hakunin can you provide a code snippet?

[hakunin]

Is there a fiddle with the wrapper linked I could fork? I don't know how to get it inside the fiddle quickly.

[hakunin]

The timeout workaround somehow stopped working for me. In the select2 issue there seem to be some other workaround, but the issue persists. https://github.com/select2/select2/issues/3992

[zsimo]

Hi,

My workaround is to use both'select2:select' and 'change' events:

• 'select2:select' used only when something is selected
• 'change' used only when a previous selection is cleared (with the 'x' button)

Something like this:

var form = {};
$('select[name="'+ fieldName +'"]').select2()
.on('select2:unselect', function (event) {
    // Prevent opening dropdown when removing tags
    // see https://github.com/select2/select2/issues/3953
    if (!event.params || !event.params.originalEvent) {
        return;
    }
    event.params.originalEvent.stopPropagation();
})
.on('select2:select', function (event, par) {
    form[fieldName] = $(this).select2().val();
})
.on('change', function (event) {
    // trigger only when filters are deselected ('x' to clear)
    // when a value is selected, it triggers on 'select2:select' event
    if (!this.value) {
        form[fieldName] = [];
    }
});