From e5fcfea764071ba1c3acedbf5df0a2c044a3e947 Mon Sep 17 00:00:00 2001
From: Jan Skovgaard <1932158+BatJan@users.noreply.github.com>
Date: Mon, 12 Oct 2020 16:43:18 +0200
Subject: [PATCH] Userpicker: Change search to use the <umb-seach-filter>
 directive (#9042)

* Switch to the umb-search-filter directive

* Add css class

* Fix styling after directive changes have been merged
---
 .../userpicker/userpicker.html                | 22 +++++++++----------
 1 file changed, 10 insertions(+), 12 deletions(-)

diff --git a/src/Umbraco.Web.UI.Client/src/views/common/infiniteeditors/userpicker/userpicker.html b/src/Umbraco.Web.UI.Client/src/views/common/infiniteeditors/userpicker/userpicker.html
index eb08b5646d..4e1c6b8e6e 100644
--- a/src/Umbraco.Web.UI.Client/src/views/common/infiniteeditors/userpicker/userpicker.html
+++ b/src/Umbraco.Web.UI.Client/src/views/common/infiniteeditors/userpicker/userpicker.html
@@ -18,18 +18,16 @@
 
             <umb-box>
                 <umb-box-content>
-                    <div class="form-search" style="margin-bottom: 15px;">
-                        <i class="icon-search" aria-hidden="true"></i>
-                        <input type="text"
-                            ng-model="vm.usersOptions.filter"
-                            ng-change="vm.searchUsers()"
-                            class="umb-search-field search-query input-block-level -full-width-input"
-                            localize="placeholder"
-                            placeholder="@placeholders_filter"
-                            umb-auto-focus
-                            revent-enter-submit
-                            no-dirty-check />
-                    </div>
+                    <umb-search-filter
+                        input-id="userpicker-search"
+                        model="vm.usersOptions.filter"
+                        label-key="placeholders_filter"
+                        text="Type to filter..."
+                        on-change="vm.searchUsers()"
+                        css-class="w-100 mb-15"
+                        auto-focus="true">
+                    </umb-search-filter>
+
                     <div class="umb-user-picker-item-list">
                         <button type="button" class="btn-reset umb-user-picker-list-item" ng-repeat="user in vm.users" ng-click="vm.selectUser(user)">
                             <div class="umb-user-picker-list-item__avatar">