CODEWITHSUNDEEP
javascriptjqueryjquery-select2
Nicolas Blanco
Nicolas Blanco

Reputation: 11299

Multiple calls to select2() on select input makes it disappear

How to reproduce :

Go to http://ivaynberg.github.com/select2/select2-latest.html with Chrome.

Open web development console, type :

$("#e1").select2()

"TypeError: Object -1 has no method 'show'"

and the first select disappears, why?

Upvotes: 0

Views: 3190

Answers (1)

Clemens Klein-Robbenhaar
Clemens Klein-Robbenhaar

Reputation: 3527

The problem is that on the second call the code wants to destroy the old generated dropdown before creating a new one. It does so before initializing itself properly.

The relevant code is in the "delete" function around line 645:

 if (select2 !== undefined) {
    select2.container.remove();
    select2.dropdown.remove();
    select2.opts.element
       .removeData("select2")
       .unbind(".select2")
       .attr("tabIndex", this.elementTabIndex)   <--- fail here
       .show();

Trouble is it calls .attr("tabIndex", this.elementTabIndex) while this.elementTabIndex is undefined and .attr(name, undefined) is equivalent to .attr(name), thus returning the attribute itself (instead of the jquery element. So you got the attribute value '-1', and '-1'.show() makes no sense then, of course.

as a kludge, use .attr("tabIndex", this.elementTabIndex || -1). a better fix might be is to call destroy only after this.elementTabIndex is initialized. I am not sure if the call to attr is really needed in the destroy at all, but then I cannot claim I understand the code.

Upvotes: 1

Related Questions