Input box is hidden with search-enabled="false" with Bootstrap theme

[cdjackson]

With the Bootstrap theme, if I add the search-enabled="false" attribute, when the dropdown is clicked, the input box is hidden. This seems strange behaviour - maybe it's intended, but if so, can it be disabled? I want to keep the input box, but just not accept input (similar to how the Selectize theme works).
Aside from being a nuisance in itself, it also causes the parent to resize when the dropdown is opened.

[sebastian-zarzycki]

+1, this is really weird and unexpected behavior.

[erslater]

I think this issue is not limited to your scenario. I have a multi-select and initially the input box is 10px wide but when I click in it it expands to full width. Here is the html (using version 0.9.5):

<ui-select multiple ng-model="selected.authorizedUsers">
    <ui-select-match placeholder="Select users...">{{$item.name}}</ui-select-match>
    <ui-select-choices repeat="user in officeUsers | filter: $select.search">
        {{user.name}}
    </ui-select-choices>
</ui-select>

[gen4sp]

+1 unexpected and unable to fix without fork
Please, remove it or make optional.

[donbobka]

👍

[chuckrea]

+1 Just happened to me as well. Very odd.

[brentmiller]

I am experiencing the same issue but with the select2 theme. Thus the issue isn't limited to the bootstrap theme.

[jedimindtrix9]

Yes, this is weird. I set a placeholder for default text ie (-select an option-). I am using the selectize theme: Two things I've noticed...1. If I switch the theme to bootstrap, the placeholder option will display. The other option was to set search-enabled to "false". Any help here would be greatly appreciated.

[seinavco]

+1

Please fix this issue.

[SamPlacette]

+1 This is affecting me as well. I am working around the problem for now by specifying placeholder text using :before pseudo-selector.

Update: I can workaround using the following CSS:

  .ui-select-bootstrap[search-enabled=false] .ui-select-match.ng-hide {
    display: inline-block !important;
  }
  .ui-select-bootstrap[search-enabled=false] .ui-select-match .text-muted.ng-hide {
    display: inline !important;
  }
  .ui-select-bootstrap[search-enabled=false].ng-dirty .ui-select-match .text-muted.ng-hide {
    display: none !important;
  }

There are probably some edge cases these styles don't support very well...

[sagivf]

+1 It would also be desirable for this to work with the "selectize" theme.

.ui-select-container[search-enabled=false] .ui-select-match.ng-hide {
  display: inline-block !important;
}
.ui-select-container[search-enabled=false] .ui-select-match .text-muted.ng-hide {
  display: inline !important;
}
.ui-select-container[search-enabled=false].ng-dirty .ui-select-match .text-muted.ng-hide {
  display: none !important;
}

Thanks @SamPlacette.

[jedimindtrix9]

One solution that I found works well with AngularJS if you are familiar with it. The way I solved this is to simply leave the theme as selectize but target you scope in js by using a for loop like this

for(var i=0; i<$scope.yourDropDownName.length; i++){
if($scope.yourDropDownName[i].id=='US'){
$scope.model.yourScopeModelName=$scope.yourDropDownName[i];
break;
}
}

[readme42]

+1

[luklapp]

Don't know if this is still an issue, but I fixed it without CSS by changing the template.

Before:
ng-hide="$select.open"

After:
ng-hide="$select.open && $select.searchEnabled"

[alusev]

Thanks @SamPlacette

[hkorutla]

I still have the same issue.

[crissdev]

Thanks @SamPlacette for the workaround

I've ended up using display: block for .ui-select-bootstrap[search-enabled=false] .ui-select-match.ng-hide actually.

[developersatish]

I have a little bit a different issue after disabling the search.
There is a cursor showing with first result, when i did a inspect element i found this a input element with hidden property.
I do not want to show this cursor, how can i disable this.

[user378230]

@developersatish what version are you using?