From 3d9f765e014ad4a0d2ad79de15b67b741fd4b827 Mon Sep 17 00:00:00 2001
From: Mads Rasmussen <madsr@hey.com>
Date: Tue, 12 Jan 2021 13:01:19 +0100
Subject: [PATCH] changes search term model from primitive

(cherry picked from commit 8a65a0f92b009d39eede05a363327cfe10f860b9)
---
 .../overlays/itempicker/itempicker.controller.js       |  4 ++++
 .../views/common/overlays/itempicker/itempicker.html   | 10 +++++-----
 2 files changed, 9 insertions(+), 5 deletions(-)

diff --git a/src/Umbraco.Web.UI.Client/src/views/common/overlays/itempicker/itempicker.controller.js b/src/Umbraco.Web.UI.Client/src/views/common/overlays/itempicker/itempicker.controller.js
index ca8a2d7a47..c4f60b766a 100644
--- a/src/Umbraco.Web.UI.Client/src/views/common/overlays/itempicker/itempicker.controller.js
+++ b/src/Umbraco.Web.UI.Client/src/views/common/overlays/itempicker/itempicker.controller.js
@@ -1,5 +1,9 @@
 function ItemPickerOverlay($scope, localizationService) {
 
+    $scope.filter = {
+        searchTerm: ''
+    };
+
     function onInit() {
         $scope.model.hideSubmitButton = true;
 
diff --git a/src/Umbraco.Web.UI.Client/src/views/common/overlays/itempicker/itempicker.html b/src/Umbraco.Web.UI.Client/src/views/common/overlays/itempicker/itempicker.html
index 1e4cc70b7f..7074497a98 100644
--- a/src/Umbraco.Web.UI.Client/src/views/common/overlays/itempicker/itempicker.html
+++ b/src/Umbraco.Web.UI.Client/src/views/common/overlays/itempicker/itempicker.html
@@ -2,7 +2,7 @@
     <div class="form-search" ng-if="model.filter !== false" style="margin-bottom: 15px;">
         <i class="icon-search" aria-hidden="true"></i>
         <input type="text"
-               ng-model="searchTerm"
+               ng-model="filter.searchTerm"
                class="umb-search-field search-query input-block-level -full-width-input"
                localize="placeholder"
                placeholder="@placeholders_filter"
@@ -10,7 +10,7 @@
                no-dirty-check />
     </div>
 
-    <div class="umb-overlay__section-header" ng-if="(model.pasteItems | filter:searchTerm).length > 0">
+    <div class="umb-overlay__section-header" ng-if="(model.pasteItems | filter:filter.searchTerm).length > 0">
         <h5><localize key="content_createFromClipboard">Paste from clipboard</localize></h5>
         <button ng-if="model.clickClearPaste" ng-click="model.clickClearPaste($event)" alt="Clear clipboard for entries accepted in this context.">
             <i class="icon-trash" aria-hidden="true"></i>
@@ -18,7 +18,7 @@
     </div>
 
     <ul class="umb-card-grid" ng-class="{'-three-in-row': model.availableItems.length < 7, '-four-in-row': model.availableItems.length >= 7}">
-        <li ng-repeat="pasteItem in model.pasteItems | filter:searchTerm">
+        <li ng-repeat="pasteItem in model.pasteItems | filter:filter.searchTerm">
             <button type="button" class="umb-card-grid-item btn-reset" ng-click="model.clickPasteItem(pasteItem)">
                 <span>
                     <i class="{{ pasteItem.icon }}" aria-hidden="true"></i>
@@ -28,12 +28,12 @@
         </li>
     </ul>
 
-    <div class="umb-overlay__section-header" ng-if="model.pasteItems.length > 0 && (model.availableItems | filter:searchTerm).length > 0">
+    <div class="umb-overlay__section-header" ng-if="model.pasteItems.length > 0 && (model.availableItems | filter:filter.searchTerm).length > 0">
         <h5><localize key="content_createEmpty">Create new</localize></h5>
     </div>
 
     <ul class="umb-card-grid" ng-class="{'-three-in-row': model.availableItems.length < 7, '-four-in-row': model.availableItems.length >= 7}">
-        <li ng-repeat="availableItem in model.availableItems | compareArrays:model.selectedItems:'alias' | orderBy:model.orderBy | filter:searchTerm">
+        <li ng-repeat="availableItem in model.availableItems | compareArrays:model.selectedItems:'alias' | orderBy:model.orderBy | filter:filter.searchTerm">
             <button type="button" class="umb-card-grid-item btn-reset" ng-click="selectItem(availableItem)">
                 <span ng-mouseover="showTooltip(availableItem, $event)" ng-mouseleave="hideTooltip()">
                     <i class="{{ availableItem.icon }}" aria-hidden="true"></i>