From: Dan Brown <redacted>
Date: Wed, 4 Aug 2021 19:48:23 +0000 (+0100)
Subject: Fixed audit log user dropdown usability issue
X-Git-Tag: v21.05.4~1^2~4
X-Git-Url: http://source.bookstackapp.com/bookstack/commitdiff_plain/7a8954ee6501853857a55df9a73c0509a55599c9

Fixed audit log user dropdown usability issue

User search input blur would trigger the submission of the search
filters which would cause strange thing where you'd click on a search
filtered user which would blur the input hence submit, but the user
would think they've clicked the user and the page would reload but the
input had not updated at that point.

Related to #2863
---

diff --git a/resources/js/components/dropdown-search.js b/resources/js/components/dropdown-search.js
index 8c81aae3c..e2d55f969 100644
--- a/resources/js/components/dropdown-search.js
+++ b/resources/js/components/dropdown-search.js
@@ -27,6 +27,7 @@ class DropdownSearch {
             this.runLocalSearch(input);
         } else {
             this.toggleLoading(true);
+            this.listContainerElem.innerHTML = '';
             this.runAjaxSearch(input);
         }
     }
diff --git a/resources/js/components/submit-on-change.js b/resources/js/components/submit-on-change.js
index 979967242..aeacae232 100644
--- a/resources/js/components/submit-on-change.js
+++ b/resources/js/components/submit-on-change.js
@@ -6,7 +6,14 @@
 class SubmitOnChange {
 
     setup() {
-        this.$el.addEventListener('change', () => {
+        this.filter = this.$opts.filter;
+
+        this.$el.addEventListener('change', (event) => {
+
+            if (this.filter && !event.target.matches(this.filter)) {
+                return;
+            }
+
             const form = this.$el.closest('form');
             if (form) {
                 form.submit();
diff --git a/resources/js/components/user-select.js b/resources/js/components/user-select.js
index c2c1f97c3..aba43e0a9 100644
--- a/resources/js/components/user-select.js
+++ b/resources/js/components/user-select.js
@@ -3,7 +3,6 @@ import {onChildEvent} from "../services/dom";
 class UserSelect {
 
     setup() {
-
         this.input = this.$refs.input;
         this.userInfoContainer = this.$refs.userInfo;
 
diff --git a/resources/views/settings/audit.blade.php b/resources/views/settings/audit.blade.php
index 9fda39a31..27bf87064 100644
--- a/resources/views/settings/audit.blade.php
+++ b/resources/views/settings/audit.blade.php
@@ -41,7 +41,9 @@
                     </div>
                 @endforeach
 
-                <div class="form-group ml-auto" component="submit-on-change">
+                <div class="form-group ml-auto"
+                     component="submit-on-change"
+                     option:submit-on-change:filter='[name="user"]'>
                     <label for="owner">{{ trans('settings.audit_table_user') }}</label>
                     @include('components.user-select', ['user' => $listDetails['user'] ? \BookStack\Auth\User::query()->find($listDetails['user']) : null, 'name' => 'user', 'compact' =>  true])
                 </div>