Select2 directive not compatible with new select2 versions (released 3.3, upcoming 3.4) #407

ni-ka opened this Issue Feb 6, 2013 · 9 comments

5 participants



Due to some required bugfixes I've tried to update the select2 component in my angular UI project. However, the freshly released 3.3 does not work with angular UI, and so does the master version.

Both have slightly different bugs, here plunkers:

released 3.3:
upcoming 3.4 / master:

AngularUI member

.attr(key, val) is returning the value instead of a reference to the jQuery wrapped DOM element. This may be caused by AngularJS itself, and if so, you might want to open a ticket there instead.

In the mean time, what happens if you modify the select2 code (for shits and giggles) so that .attr() is the last method in the chain instead of second to last?



what is the latest version of select2 compatible with angular UI ? Thanks.

AngularUI member

@slainer68 Trying to figure out WHY it's not compatible with the latest version, as I can't seem to understand why it wouldn't be.


@ProLoser : thanks.

In my case, when I'm using the angular ui select2 directive, the directive makes more than 1 select() call on the element, and on the second call, the select2 input disappears offscreen (you can reproduce the behaviour by just manually calling select2() twice on an element)...


@slainer68 you can safely use 3.2

@ProLoser regarding your first reply, this only seems to be valid for 3.3, right? 3.4 does not show any javascript error. It seems that it is hiding the wrong item (the select2-offscreen class gets applied to the container div instead of the drop only). If you remove the select2-offscreen class from the container the control is working fine.

I believe the problem is along these lines (around line 549)

if (opts.element.attr("class") !== undefined) {
    this.container.addClass(opts.element.attr("class").replace(/validate\[[\S ]+] ?/, ''));


this.elementTabIndex = this.opts.element.attr("tabIndex");

// swap container for the element
    .data("select2", this)
    .bind("focus.select2", function() { $(this).select2("focus")})
    .attr("tabIndex", "-1")

@ni-ka : i don't understand why but my select2 goes off screen when using the directive even with v.3.2 😢


Hi, I have the exact problem @ni-ka mentionned. Playing around with Firebug, I discovered that my select2 dropdown wasn't there because the class select2-offscreen was applied to the Div. I am now back to select 2 3.2.

AngularUI member

AngularUI is currently undergoing a restructure. This project will no longer hold the codebase, can you please relocate this to (after confirming it's still necessary with the latest code)?

@ProLoser ProLoser closed this May 3, 2013
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment