Similar Error #3016 - 'allowClear' with 'data-placeholder'

[maikealame]

Hey,

I was reading about error #3016 and realized the same error occurs when there is a 'data-placeholder' attribute on the element without the parameter in the call of select2, as shown below:

No errors

$("#select").select2({
    ajax: { ... },
    allowClear: true,
    placeholder: " something..."
});

<select id="select"></select>

Will generate an error

Uncaught TypeError: Cannot read property 'id' of undefined
AllowClear._handleClear @ select2.full.js:1754
(anonymous function) @ select2.full.js:571
(anonymous function) @ select2.full.js:1714
m.event.dispatch @ jquery-1.11.3.min.js:4
r.handle @ jquery-1.11.3.min.js:4

$("#select").select2({
    ajax: { ... },
    allowClear: true
});

<select id="select" data-placeholder="something..."></select>

[grandehombre]

I've encountered the same problem and have used the following mod to fix it, until the next release comes out

  AllowClear.prototype._handleClear = function (_, evt) {
    // Ignore the event if it is disabled
    if (this.options.get('disabled')) {
      return;
    }

    var $clear = this.$selection.find('.select2-selection__clear');

    // Ignore the event if nothing has been selected
    if ($clear.length === 0) {
      return;
    }

    evt.stopPropagation();

    var data = $clear.data('data');

    for (var d = 0; d < data.length; d++) {
      var unselectData = {
        data: data[d]
      };

      // Trigger the `unselect` event, so people can prevent it from being
      // cleared.
      this.trigger('unselect', unselectData);

      // If the event was prevented, don't clear it out.
      if (unselectData.prevented) {
        return;
      }
    }


// ----------------------------------- temporary fix
    if (typeof this.placeholder !== 'undefined') {
        this.$element.val(this.placeholder.id).trigger('change');
    } else {
        this.$element.val("").trigger('change');
    }
// ----------------------------------- end of temporary fix

    this.trigger('toggle', {});
  };

[joshi1983]

I created a pull request #4776 that uses @grandehombre fix. It uses the single quotes required by the project's coding style and leaves out the temporary fix comments.

[santaclaus21]

The same BUG with latest version 4.0.3. Select (no ajax) with optgroups, call with data-allow-clear="true", or by option { allowClear: true } and placeholder="xxx", return console errot:

select2.full.min.js:1 Uncaught TypeError: Cannot read property 'id' of undefined
    at d.c._handleClear (select2.full.min.js:1)
    at d.j [as _handleClear] (select2.full.min.js:1)
    at HTMLSpanElement.<anonymous> (select2.full.min.js:1)
    at HTMLSpanElement.dispatch (jquery.min.js:5)
    at HTMLSpanElement.v.handle (jquery.min.js:5)

EDIT: I have found resolve for this problem: after migration 3.5.2 > 4.0, "placeholder" MUST BE simply replaced with "data-placeholder".

[joshi1983]

@santaclaus21 if #4776 helps you, feel free to take over the pull request by finishing the pull request tasks. I'll probably never get to making the unit tests that were requested.

[alexweissman]

I can't seem to replicate the console error message in 4.0.6-rc.1; see http://jsbin.com/futefuhele/edit?html,js,console,output. Does this error only occur with an ajax data source?

That being said, I do notice that data-placeholder and data-allow-clear don't seem to work at all. See #5133.

[alexweissman]

At any rate, this is a duplicate of #3497 - please continue the conversation in that thread.