From 9155e7de7e1035dc3d6bd51288f909268c240a76 Mon Sep 17 00:00:00 2001
From: Ben Thomson <git@alfreido.com>
Date: Mon, 6 Apr 2020 15:45:22 +0800
Subject: [PATCH] Properly scope the search query in filter widgets.

The search input in filters used a local data request to filter options. While this worked fine for most cases, it failed inside modal relations as the relation keys were not being pushed through due to the request not being linked to the relation modal.

This refactors the request to run through the relation modal, emulating the functionality of "data-track-input" to debounce text entry.

Fixes https://github.com/octobercms/october/issues/4775
---
 modules/system/assets/ui/js/filter.js | 48 ++++++++++++++++++++++++---
 1 file changed, 44 insertions(+), 4 deletions(-)

diff --git a/modules/system/assets/ui/js/filter.js b/modules/system/assets/ui/js/filter.js
index badc8125c..708efa294 100644
--- a/modules/system/assets/ui/js/filter.js
+++ b/modules/system/assets/ui/js/filter.js
@@ -56,10 +56,7 @@
                                 name="search"                                                                          \
                                 autocomplete="off"                                                                     \
                                 class="filter-search-input form-control icon search popup-allow-focus"                 \
-                                data-request="{{ optionsHandler }}"                                                    \
-                                data-load-indicator-opaque                                                             \
-                                data-load-indicator                                                                    \
-                                data-track-input />                                                                    \
+                                data-search />                                                                         \
                             <div class="filter-items">                                                                 \
                                 <ul>                                                                                   \
                                     {{#available}}                                                                     \
@@ -155,6 +152,10 @@
                 e.preventDefault()
                 self.filterScope(true)
             })
+
+            $(event.relatedTarget).on('input', '#controlFilterPopover input[data-search]', function (e) {
+                self.searchQuery($(this))
+            });
         })
 
         // Setup event handler to apply selected options when closing the type: group scope popup
@@ -556,6 +557,45 @@
         return $.oc.lang.get(name, defaultValue)
     }
 
+    FilterWidget.prototype.searchQuery = function ($el) {
+        if (this.dataTrackInputTimer !== undefined) {
+            window.clearTimeout(this.dataTrackInputTimer)
+        }
+
+        var self = this
+
+        this.dataTrackInputTimer = window.setTimeout(function () {
+            var
+                lastValue = $el.data('oc.lastvalue'),
+                thisValue = $el.val()
+
+            if (lastValue !== undefined && lastValue == thisValue) {
+                return
+            }
+
+            $el.data('oc.lastvalue', thisValue)
+
+            if (self.lastDataTrackInputRequest) {
+                self.lastDataTrackInputRequest.abort()
+            }
+
+            var data = {
+                scopeName: self.activeScopeName,
+                search: thisValue
+            }
+
+            $.oc.stripeLoadIndicator.show()
+            self.lastDataTrackInputRequest = self.$el.request(self.options.optionsHandler, {
+                data: data
+            }).success(function(data){
+                self.filterAvailable(self.activeScopeName, data.options.available)
+                self.toggleFilterButtons()
+            }).always(function(){
+                $.oc.stripeLoadIndicator.hide()
+            })
+        }, 300)
+    }
+
     // FILTER WIDGET PLUGIN DEFINITION
     // ============================