From e5858bba8b4e6438dd87648890be92c8240730c3 Mon Sep 17 00:00:00 2001
From: Moustafa Ismael <m.ismael@nectarfinancial.com>
Date: Mon, 24 Apr 2017 11:29:57 -0400
Subject: [PATCH] Make the search input field sticky so it deosn't scroll with
 the rest of the dropdown

---
 .../angularjs-dropdown-multiselect.html       | 263 +++++++++---------
 src/app/main/stylesheet.scss                  |   7 +-
 2 files changed, 139 insertions(+), 131 deletions(-)

diff --git a/src/app/component/angularjs-dropdown-multiselect.html b/src/app/component/angularjs-dropdown-multiselect.html
index e92650b6..cd17418f 100644
--- a/src/app/component/angularjs-dropdown-multiselect.html
+++ b/src/app/component/angularjs-dropdown-multiselect.html
@@ -9,135 +9,138 @@
         {{getButtonText()}}&nbsp;<span class="caret"></span>
       </button>
     </div>
-  <ul class="dropdown-menu dropdown-menu-form"
-      ng-if="open"
-      ng-style="{display: open ? 'block' : 'none', height : settings.scrollable ? settings.scrollableHeight : 'auto', overflow: 'auto' }">
-    <li ng-if="settings.showCheckAll && settings.selectionLimit === 0">
-      <a ng-keydown="keyDownLink($event)"
-         data-ng-click="selectAll()"
-         tabindex="-1"
-         id="selectAll">
-        <span class="glyphicon glyphicon-ok"></span>
-        {{texts.checkAll}}
-      </a>
-    <li ng-if="settings.showUncheckAll">
-      <a ng-keydown="keyDownLink($event)"
-         data-ng-click="deselectAll();"
-         tabindex="-1"
-         id="deselectAll">
-        <span class="glyphicon glyphicon-remove"></span>
-        {{texts.uncheckAll}}
-      </a>
-    </li>
-    <li ng-if="settings.selectByGroups && ((settings.showCheckAll && settings.selectionLimit > 0) || settings.showUncheckAll)"
-        class="divider">
-    </li>
-    <li ng-repeat="currentGroup in settings.selectByGroups track by $index"
-        ng-click="selectCurrentGroup(currentGroup)">
-      <a ng-class="{'dropdown-selected-group': selectedGroup === currentGroup}"
-         tabindex="-1">
-        {{::texts.selectGroup}} {{::getGroupLabel(currentGroup)}}
-      </a>
-    </li>
-    <li ng-if="settings.selectByGroups && settings.showEnableSearchButton"
-        class="divider">
-    </li>
-    <li ng-if="settings.showEnableSearchButton && settings.enableSearch">
-      <a ng-keydown="keyDownLink($event); keyDownToggleSearch();"
-         ng-click="toggleSearch($event);"
-         tabindex="-1">
-        {{texts.disableSearch}}
-      </a>
-    </li>
-    <li ng-if="settings.showEnableSearchButton && !settings.enableSearch">
-      <a ng-keydown="keyDownLink($event); keyDownToggleSearch();"
-         ng-click="toggleSearch($event);"
-         tabindex="-1">
-        {{texts.enableSearch}}
-      </a>
-    </li>
-    <li ng-if="(settings.showCheckAll && settings.selectionLimit > 0) || settings.showUncheckAll || settings.showEnableSearchButton"
-        class="divider">
-    </li>
-    <li ng-if="settings.enableSearch">
-      <div class="dropdown-header">
-        <input type="text"
-               class="form-control searchField"
-               ng-keydown="keyDownSearchDefault($event); keyDownSearch($event, input.searchFilter);"
-               ng-style="{width: '100%'}"
-               ng-model="input.searchFilter"
-               placeholder="{{texts.searchPlaceholder}}" />
-      </div>
-    </li>
-    <li ng-if="settings.enableSearch"
-        class="divider">
-    </li>
-    <li ng-if="settings.groupBy"
-        ng-repeat-start="option in orderedItems = ( options | filter:getFilter(input.searchFilter) | orderBy:'':false:orderFunction)"
-        ng-show="getPropertyForObject(option, settings.groupBy) !== getPropertyForObject(orderedItems[$index - 1], settings.groupBy)"
-        role="presentation"
-        class="dropdown-header">
-      {{ getGroupLabel(getPropertyForObject(option, settings.groupBy)) }}
-    </li>
-    <li ng-if="settings.groupBy"
-        ng-class="{'active': isChecked(option) && settings.styleActive}"
-        ng-repeat-end
-        role="presentation">
-      <a ng-keydown="option.disabled || keyDownLink($event)"
-         role="menuitem"
-         class="option"
-         tabindex="-1"
-         ng-click="option.disabled || setSelectedItem(option, false, true)"
-         ng-disabled="option.disabled">
-        <div ng-if="settings.checkBoxes"
-             class="checkbox">
-          <label>
-            <input class="checkboxInput"
-                   type="checkbox"
-                   ng-click="checkboxClick($event, option)"
-                   ng-checked="isChecked(option)" />
-            <span dm-dropdown-static-include="{{settings.template}}"></span>
-          </label>
+    <div class="dropdown-menu dropdown-menu-form">
+      <div ng-if="settings.enableSearch">
+        <div class="dropdown-header">
+          <input type="text"
+                 class="form-control searchField"
+                 ng-keydown="keyDownSearchDefault($event); keyDownSearch($event, input.searchFilter);"
+                 ng-style="{width: '100%'}"
+                 ng-model="input.searchFilter"
+                 placeholder="{{texts.searchPlaceholder}}" />
         </div>
-        <span ng-if="!settings.checkBoxes"
-              data-ng-class="{'glyphicon glyphicon-ok': isChecked(option)}">
-        </span>
-        <span dm-dropdown-static-include="{{settings.template}}"></span>
-      </a>
-    </li>
-    <li ng-if="!settings.groupBy"
-        ng-class="{'active': isChecked(option) && settings.styleActive}"
-        role="presentation"
-        ng-repeat="option in options | filter:getFilter(input.searchFilter) | orderBy:'':false:orderFunction">
-      <a ng-keydown="option.disabled || keyDownLink($event)"
-         role="menuitem"
-         class="option"
-         tabindex="-1"
-         ng-click="option.disabled || setSelectedItem(option, false, true)"
-         ng-disabled="option.disabled">
-        <div ng-if="settings.checkBoxes"
-             class="checkbox">
-          <label>
-            <input class="checkboxInput"
-                   type="checkbox"
-                   ng-click="checkboxClick($event, option)"
-                   ng-checked="isChecked(option)" />
+      </div>
+      <div ng-if="settings.enableSearch"
+          class="divider">
+      </div>
+      <ul class="dropdown-menu"
+          ng-if="open"
+          ng-style="{display: open ? 'block' : 'none', height : settings.scrollable ? settings.scrollableHeight : 'auto', overflow: 'auto' }">
+        <li ng-if="settings.showCheckAll && settings.selectionLimit === 0">
+          <a ng-keydown="keyDownLink($event)"
+             data-ng-click="selectAll()"
+             tabindex="-1"
+             id="selectAll">
+            <span class="glyphicon glyphicon-ok"></span>
+            {{texts.checkAll}}
+          </a>
+        <li ng-if="settings.showUncheckAll">
+          <a ng-keydown="keyDownLink($event)"
+             data-ng-click="deselectAll();"
+             tabindex="-1"
+             id="deselectAll">
+            <span class="glyphicon glyphicon-remove"></span>
+            {{texts.uncheckAll}}
+          </a>
+        </li>
+        <li ng-if="settings.selectByGroups && ((settings.showCheckAll && settings.selectionLimit > 0) || settings.showUncheckAll)"
+            class="divider">
+        </li>
+        <li ng-repeat="currentGroup in settings.selectByGroups track by $index"
+            ng-click="selectCurrentGroup(currentGroup)">
+          <a ng-class="{'dropdown-selected-group': selectedGroup === currentGroup}"
+             tabindex="-1">
+            {{::texts.selectGroup}} {{::getGroupLabel(currentGroup)}}
+          </a>
+        </li>
+        <li ng-if="settings.selectByGroups && settings.showEnableSearchButton"
+            class="divider">
+        </li>
+        <li ng-if="settings.showEnableSearchButton && settings.enableSearch">
+          <a ng-keydown="keyDownLink($event); keyDownToggleSearch();"
+             ng-click="toggleSearch($event);"
+             tabindex="-1">
+            {{texts.disableSearch}}
+          </a>
+        </li>
+        <li ng-if="settings.showEnableSearchButton && !settings.enableSearch">
+          <a ng-keydown="keyDownLink($event); keyDownToggleSearch();"
+             ng-click="toggleSearch($event);"
+             tabindex="-1">
+            {{texts.enableSearch}}
+          </a>
+        </li>
+        <li ng-if="(settings.showCheckAll && settings.selectionLimit > 0) || settings.showUncheckAll || settings.showEnableSearchButton"
+            class="divider">
+        </li>
+        <li ng-if="settings.groupBy"
+            ng-repeat-start="option in orderedItems = ( options | filter:getFilter(input.searchFilter) | orderBy:'':false:orderFunction)"
+            ng-show="getPropertyForObject(option, settings.groupBy) !== getPropertyForObject(orderedItems[$index - 1], settings.groupBy)"
+            role="presentation"
+            class="dropdown-header">
+          {{ getGroupLabel(getPropertyForObject(option, settings.groupBy)) }}
+        </li>
+        <li ng-if="settings.groupBy"
+            ng-class="{'active': isChecked(option) && settings.styleActive}"
+            ng-repeat-end
+            role="presentation">
+          <a ng-keydown="option.disabled || keyDownLink($event)"
+             role="menuitem"
+             class="option"
+             tabindex="-1"
+             ng-click="option.disabled || setSelectedItem(option, false, true)"
+             ng-disabled="option.disabled">
+            <div ng-if="settings.checkBoxes"
+                 class="checkbox">
+              <label>
+                <input class="checkboxInput"
+                       type="checkbox"
+                       ng-click="checkboxClick($event, option)"
+                       ng-checked="isChecked(option)" />
+                <span dm-dropdown-static-include="{{settings.template}}"></span>
+              </label>
+            </div>
+            <span ng-if="!settings.checkBoxes"
+                  data-ng-class="{'glyphicon glyphicon-ok': isChecked(option)}">
+            </span>
             <span dm-dropdown-static-include="{{settings.template}}"></span>
-          </label>
-        </div>
-        <span ng-if="!settings.checkBoxes"
-              data-ng-class="{'glyphicon glyphicon-ok': isChecked(option)}">
-        </span>
-        <span ng-if="!settings.checkBoxes"
-              dm-dropdown-static-include="{{settings.template}}"></span>
-      </a>
-    </li>
-    <li class="divider"
-        ng-show="settings.selectionLimit > 1">
-    </li>
-    <li role="presentation"
-        ng-show="settings.selectionLimit > 1">
-      <a role="menuitem">{{selectedModel.length}} {{texts.selectionOf}} {{settings.selectionLimit}} {{texts.selectionCount}}</a>
-    </li>
-  </ul>
-</div>
\ No newline at end of file
+          </a>
+        </li>
+        <li ng-if="!settings.groupBy"
+            ng-class="{'active': isChecked(option) && settings.styleActive}"
+            role="presentation"
+            ng-repeat="option in options | filter:getFilter(input.searchFilter) | orderBy:'':false:orderFunction">
+          <a ng-keydown="option.disabled || keyDownLink($event)"
+             role="menuitem"
+             class="option"
+             tabindex="-1"
+             ng-click="option.disabled || setSelectedItem(option, false, true)"
+             ng-disabled="option.disabled">
+            <div ng-if="settings.checkBoxes"
+                 class="checkbox">
+              <label>
+                <input class="checkboxInput"
+                       type="checkbox"
+                       ng-click="checkboxClick($event, option)"
+                       ng-checked="isChecked(option)" />
+                <span dm-dropdown-static-include="{{settings.template}}"></span>
+              </label>
+            </div>
+            <span ng-if="!settings.checkBoxes"
+                  data-ng-class="{'glyphicon glyphicon-ok': isChecked(option)}">
+            </span>
+            <span ng-if="!settings.checkBoxes"
+                  dm-dropdown-static-include="{{settings.template}}"></span>
+          </a>
+        </li>
+        <li class="divider"
+            ng-show="settings.selectionLimit > 1">
+        </li>
+        <li role="presentation"
+            ng-show="settings.selectionLimit > 1">
+          <a role="menuitem">{{selectedModel.length}} {{texts.selectionOf}} {{settings.selectionLimit}} {{texts.selectionCount}}</a>
+        </li>
+      </ul>
+    </div>
+
+</div>
diff --git a/src/app/main/stylesheet.scss b/src/app/main/stylesheet.scss
index 6c87954a..dab69e96 100644
--- a/src/app/main/stylesheet.scss
+++ b/src/app/main/stylesheet.scss
@@ -262,6 +262,11 @@ blockquote {
 ul {
     list-style: disc inside;
     padding-left: 20px;
+    position: relative;
+    border: none;
+    box-shadow: none;
+    width: 100%;
+    max-height: 300px;
 }
 ol {
     list-style: decimal inside;
@@ -390,7 +395,7 @@ footer a:hover {
         padding-right: 0;
         margin-left: 0;
     }
-		
+
 		a.option[disabled] {
     	opacity: 0.5;
 		}