ui-select
ui-select copied to clipboard
angular-ui
Not showing choices
I think that I've discovered a bug particularly in my use-case because I'm (still) not able to reproduce it on Plunkr but I'm able to identify it manifesting on my page. I'm using the latest versions of Bootstrap, AngularJS (with ngSanitize of course) and UI Select. I've used the same code from the Basic example in Getting Started, and this is what I get when I put it on my website:
That happens when I click on caret to list all possible choices. You see that opacity (inline) CSS attribute is set to zero, which is odd because it has to be set to 1 in order for choices to be visible, so once I change the attribute value from 0 to 1, it starts to behave normally.
And because that attribute is inline, there's no possibility that it's due to some conflict with my custom CSS (if there was a conflict I would find it right there where are all applied attributes listed).
Update: I have finally identified the bug - this doesn't happen when I disable ngAnimate module, therefore it's probably related with waiting for animation even when there isn't any to occur, because in my case I have set classNameFilter option for that module so only particular elements of the page would be animated, but not the ui-select one. The logic has to be definitely changed there.
Anyways, here's a demonstration: http://plnkr.co/edit/GUZTvSCrkMOPUxrEbXpE?p=preview
As told in #1652, a small workarround (while they don't fix this) that worked for me would be
.ui-select-dropdown.select2-drop-active { opacity: 1 !important; }
+1
Same happened with width. ui-select-search input element got some random width value. It's happening after including ngAnimate.
+1 "Improved" @twizzzlers solution: http://plnkr.co/edit/qSJUCAQ2Cf6ul7Ji8Oif?p=preview but you still need to click twice to search.
I removed select2-drop-active class because it doesn't get one.
ui-select example w/o ngAnimate: http://angular-ui.github.io/ui-select/demo-bootstrap.html
One piece of information about this bug:
On select.js 0.19.5, the problem was on scope.calculateDropdownPos() function, it is failing to call calculateDropdownPosAfterAnimation() where opacity is being set to 1. In my case, the problem occurs only when I set append-to-body="true" so below change worked for me:
var appendToBody = scope.$eval(attrs.appendToBody),
AppendToBody = appendToBody !== undefined ? appendToBody : uiSelectConfig.appendToBody;
//if (!uisOffset(dropdown).height && $select.$animate && $select.$animate.on && $select.$animate.enabled(dropdown)) {
if (!AppendToBody && !uisOffset(dropdown).height && $select.$animate && $select.$animate.on && $select.$animate.enabled(dropdown)) {
Does it make sense?
+1. Same issue here when using ngAnimate and 'multiple' select. Without ngAnimate it works fine.
+1 Experiencing the same issue using bootstrap theme, single select and search enabled.
Guys set opacity in ui-select-choices class as a workaround:
.ui-select-choices {
opacity: 1 !important;
}
+1 The visibility is working with the workaround. However, the field is not getting the focus so the user needs to click again to start typing
find in select.js , this function does not working,but i do not know why,who can help me.
$select.$animate.on('enter', dropdown, function (elem, phase) {
if (phase === 'close' && needsCalculated) {
calculateDropdownPosAfterAnimation();
needsCalculated = false;
}
});
fixed it by this way
https://stackoverflow.com/questions/29893423/angular-ui-select-is-not-displaying-the-list-of-options-when-included-in-angular