Fix: Search box not shown to search when data is an empty array with select2 theme

Author: Sparksx

dist/select.css

@@ -1,7 +1,7 @@
 /*!
  * ui-select
  * http://github.com/angular-ui/ui-select
- * Version: 0.19.7 - 2017-04-15T14:28:36.790Z
+ * Version: 0.19.8 - 2018-01-11T13:06:09.355Z
  * License: MIT
  */
 
@@ -21,11 +21,10 @@
   overflow: hidden !important;
   position: absolute !important;
   outline: 0 !important;
-  left: 0px !important;
-  top: 0px !important;
+  left: 0 !important;
+  top: 0 !important;
 }
 
-
 .ui-select-choices-row:hover {
   background-color: #f5f5f5;
 }
@@ -34,68 +33,84 @@
 
 /* Mark invalid Select2 */
 .ng-dirty.ng-invalid > a.select2-choice {
-    border-color: #D44950;
+  border-color: #D44950;
 }
 
 .select2-result-single {
   padding-left: 0;
 }
 
-.select2-locked > .select2-search-choice-close{
-  display:none;
+.select2-locked > .select2-search-choice-close {
+  display: none;
 }
 
-.select-locked > .ui-select-match-close{
-    display:none;
+.select-locked > .ui-select-match-close {
+  display: none;
 }
 
 body > .select2-container.open {
   z-index: 9999; /* The z-index Select2 applies to the select2-drop */
 }
 
+.select2 .ui-select-footer,
+.select2 .ui-select-header {
+  padding: 4px 10px;
+}
+
+.select2 .ui-select-footer {
+  border-top: 1px solid #dfe5eb;
+}
+
+.select2 .ui-select-header {
+  border-bottom: 1px solid #dfe5eb;
+}
+
 /* Handle up direction Select2 */
 .ui-select-container[theme="select2"].direction-up .ui-select-match,
 .ui-select-container.select2.direction-up .ui-select-match {
-    border-radius: 4px; /* FIXME hardcoded value :-/ */
-    border-top-left-radius: 0;
-    border-top-right-radius: 0;
+  border-radius: 4px; /* FIXME hardcoded value :-/ */
+  border-top-left-radius: 0;
+  border-top-right-radius: 0;
 }
+
 .ui-select-container[theme="select2"].direction-up .ui-select-dropdown,
 .ui-select-container.select2.direction-up .ui-select-dropdown {
-    border-radius: 4px; /* FIXME hardcoded value :-/ */
-    border-bottom-left-radius: 0;
-    border-bottom-right-radius: 0;
+  border-radius: 4px; /* FIXME hardcoded value :-/ */
+  border-bottom-left-radius: 0;
+  border-bottom-right-radius: 0;
 
-    border-top-width: 1px;  /* FIXME hardcoded value :-/ */
-    border-top-style: solid;
+  border-top-width: 1px; /* FIXME hardcoded value :-/ */
+  border-top-style: solid;
 
-    box-shadow: 0 -4px 8px rgba(0, 0, 0, 0.25);
+  box-shadow: 0 -4px 8px rgba(0, 0, 0, 0.25);
 
-    margin-top: -4px; /* FIXME hardcoded value :-/ */
+  margin-top: -4px; /* FIXME hardcoded value :-/ */
 }
+
 .ui-select-container[theme="select2"].direction-up .ui-select-dropdown .select2-search,
 .ui-select-container.select2.direction-up .ui-select-dropdown .select2-search {
-    margin-top: 4px; /* FIXME hardcoded value :-/ */
+  margin-top: 4px; /* FIXME hardcoded value :-/ */
 }
+
 .ui-select-container[theme="select2"].direction-up.select2-dropdown-open .ui-select-match,
 .ui-select-container.select2.direction-up.select2-dropdown-open .ui-select-match {
-    border-bottom-color: #5897fb;
+  border-bottom-color: #5897fb;
 }
 
 .ui-select-container[theme="select2"] .ui-select-dropdown .ui-select-search-hidden,
-.ui-select-container[theme="select2"] .ui-select-dropdown .ui-select-search-hidden input{
-    opacity: 0;
-    height: 0;
-    min-height: 0;
-    padding: 0;
-    margin: 0;
-    border:0;
+.ui-select-container[theme="select2"] .ui-select-dropdown .ui-select-search-hidden input {
+  opacity: 0;
+  height: 0;
+  min-height: 0;
+  padding: 0;
+  margin: 0;
+  border: 0;
 }
 
 /* Selectize theme */
 
 /* Helper class to show styles when focus */
-.selectize-input.selectize-focus{
+.selectize-input.selectize-focus {
   border-color: #007FBB !important;
 }
 
@@ -114,25 +129,47 @@ body > .select2-container.open {
   width: 100%;
 }
 
+.selectize-dropdown .ui-select-footer,
+.selectize-dropdown .ui-select-header {
+  padding: 5px 8px;
+}
+
+.selectize-dropdown .ui-select-header {
+  border-bottom: 1px solid #b8b8b8;
+}
+
+.selectize-dropdown .ui-select-footer {
+  border-top: 1px solid #b8b8b8;
+}
+
 /* Mark invalid Selectize */
 .ng-dirty.ng-invalid > div.selectize-input {
-    border-color: #D44950;
+  border-color: #D44950;
 }
 
 /* Handle up direction Selectize */
 .ui-select-container[theme="selectize"].direction-up .ui-select-dropdown {
-    box-shadow: 0 -4px 8px rgba(0, 0, 0, 0.25);
-    margin-top: -2px; /* FIXME hardcoded value :-/ */
+  box-shadow: 0 -4px 8px rgba(0, 0, 0, 0.25);
+  margin-top: -2px; /* FIXME hardcoded value :-/ */
+}
+
+.ui-select-container[theme="selectize"] input.ui-select-search-hidden {
+  opacity: 0;
+  height: 0;
+  min-height: 0;
+  padding: 0;
+  margin: 0;
+  border: 0;
+  width: 0;
 }
 
-.ui-select-container[theme="selectize"] input.ui-select-search-hidden{
-    opacity: 0;
-    height: 0;
-    min-height: 0;
-    padding: 0;
-    margin: 0;
-    border:0;
-    width: 0;
+.ui-select-container[theme="selectize"] .ui-select-header-group-selectable:hover {
+    background-color: #f5f5f5;
+}
+
+.ui-select-container[theme="selectize"] .ui-select-header-group-selectable {
+    cursor: pointer;
+    padding-left: 15px;
 }
 
 /* Bootstrap theme */
@@ -171,22 +208,23 @@ body > .select2-container.open {
   border-top-right-radius: 0;
   border-bottom-right-radius: 0;
 }
+
 .input-group > .ui-select-bootstrap > input.ui-select-search.form-control.direction-up {
   border-radius: 4px !important; /* FIXME hardcoded value :-/ */
   border-top-right-radius: 0 !important;
   border-bottom-right-radius: 0 !important;
 }
 
-.ui-select-bootstrap .ui-select-search-hidden{
-    opacity: 0;
-    height: 0;
-    min-height: 0;
-    padding: 0;
-    margin: 0;
-    border:0;
+.ui-select-bootstrap .ui-select-search-hidden {
+  opacity: 0;
+  height: 0;
+  min-height: 0;
+  padding: 0;
+  margin: 0;
+  border: 0;
 }
 
-.ui-select-bootstrap > .ui-select-match > .btn{
+.ui-select-bootstrap > .ui-select-match > .btn {
   /* Instead of center because of .btn */
   text-align: left !important;
 }
@@ -198,7 +236,8 @@ body > .select2-container.open {
 }
 
 /* See Scrollable Menu with Bootstrap 3 http://stackoverflow.com/questions/19227496 */
-.ui-select-bootstrap > .ui-select-choices ,.ui-select-bootstrap > .ui-select-no-choice {
+.ui-select-bootstrap .ui-select-choices,
+.ui-select-bootstrap .ui-select-no-choice {
   width: 100%;
   height: auto;
   max-height: 200px;
@@ -261,6 +300,22 @@ body > .ui-select-bootstrap.open {
   border-right: 1px solid #428bca;
 }
 
+
+.ui-select-bootstrap .ui-select-choices {
+  padding: 5px 0;
+  margin: 0;
+  list-style: none;
+
+.ui-select-bootstrap .ui-select-header-group-selectable:hover {
+    background-color: #f5f5f5;
+}
+
+.ui-select-bootstrap .ui-select-header-group-selectable {
+    color: black;
+    cursor: pointer;
+    padding: 3px 10px;
+}
+
 .ui-select-bootstrap .ui-select-choices-row>span {
     cursor: pointer;
     display: block;
@@ -272,51 +327,87 @@ body > .ui-select-bootstrap.open {
     white-space: nowrap;
 }
 
-.ui-select-bootstrap .ui-select-choices-row>span:hover, .ui-select-bootstrap .ui-select-choices-row>span:focus {
-    text-decoration: none;
-    color: #262626;
-    background-color: #f5f5f5;
+.ui-select-bootstrap .ui-select-choices-row > span {
+  cursor: pointer;
+  display: block;
+  padding: 3px 20px;
+  clear: both;
+  font-weight: 400;
+  line-height: 1.42857143;
+  color: #333;
+  white-space: nowrap;
+}
+
+.ui-select-bootstrap .ui-select-choices-row > span:hover, .ui-select-bootstrap .ui-select-choices-row > span:focus {
+  text-decoration: none;
+  color: #262626;
+  background-color: #f5f5f5;
+}
+
+.ui-select-bootstrap .ui-select-choices-row.active > span {
+  color: #fff;
+  text-decoration: none;
+  outline: 0;
+  background-color: #428bca;
 }
 
-.ui-select-bootstrap .ui-select-choices-row.active>span {
-    color: #fff;
-    text-decoration: none;
-    outline: 0;
-    background-color: #428bca;
+.ui-select-bootstrap .ui-select-choices-row.disabled > span,
+.ui-select-bootstrap .ui-select-choices-row.active.disabled > span {
+  color: #777;
+  cursor: not-allowed;
+  background-color: #fff;
 }
 
-.ui-select-bootstrap .ui-select-choices-row.disabled>span,
-.ui-select-bootstrap .ui-select-choices-row.active.disabled>span {
-    color: #777;
-    cursor: not-allowed;
-    background-color: #fff;
+.ui-select-bootstrap .ui-select-footer,
+.ui-select-bootstrap .ui-select-header {
+  display: block;
+  padding: 5px 20px;
+  clear: both;
+  font-weight: 400;
+  line-height: 1.42857143;
+}
+
+.ui-select-bootstrap .ui-select-footer {
+  border-top: 1px solid #dfe5eb;
+}
+
+.ui-select-bootstrap .ui-select-header {
+  border-bottom: 1px solid #dfe5eb;
+}
+
+.ui-select-bootstrap .ui-select-dropdown {
+  width: 100%;
+  padding: 0;
+  margin-top: -1px;
 }
 
 /* fix hide/show angular animation */
 .ui-select-match.ng-hide-add,
 .ui-select-search.ng-hide-add {
-    display: none !important;
+  display: none !important;
 }
 
 /* Mark invalid Bootstrap */
 .ui-select-bootstrap.ng-dirty.ng-invalid > button.btn.ui-select-match {
-    border-color: #D44950;
+  border-color: #D44950;
 }
 
 /* Handle up direction Bootstrap */
 .ui-select-container[theme="bootstrap"].direction-up .ui-select-dropdown {
-    box-shadow: 0 -4px 8px rgba(0, 0, 0, 0.25);
+  box-shadow: 0 -4px 8px rgba(0, 0, 0, 0.25);
 }
 
 .ui-select-bootstrap .ui-select-match-text {
-    width: 100%;
-    padding-right: 1em;
+  width: 100%;
+  padding-right: 1em;
 }
+
 .ui-select-bootstrap .ui-select-match-text span {
-    display: inline-block;
-    width: 100%;
-    overflow: hidden;
+  display: inline-block;
+  width: 100%;
+  overflow: hidden;
 }
+
 .ui-select-bootstrap .ui-select-toggle > a.btn {
   position: absolute;
   height: 10px;
@@ -326,10 +417,10 @@ body > .ui-select-bootstrap.open {
 
 /* Spinner */
 .ui-select-refreshing.glyphicon {
-    position: absolute;
-    right: 0;
-    padding: 8px 27px;
- }
+  position: absolute;
+  right: 0;
+  padding: 8px 27px;
+}
 
 @-webkit-keyframes ui-select-spin {
   0% {
@@ -341,6 +432,7 @@ body > .ui-select-bootstrap.open {
     transform: rotate(359deg);
   }
 }
+
 @keyframes ui-select-spin {
   0% {
     -webkit-transform: rotate(0deg);