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 8c81aae3c2b338bfb1a49723383e603952e1d878..e2d55f9694ded7b9d938050f563fad4791a93cb4 100644 (file)
--- 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 97996724235efda29fa1bc67752844da199cf644..aeacae23213bd96b94290ed9ab6a4e9e131a4b78 100644 (file)
--- 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 c2c1f97c3aee5911fdb8c80ce4d63c5609370139..aba43e0a920a5c66b0cdb8097061cec9c039d211 100644 (file)
--- 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 9fda39a317c96e6536576d30d2d7a209e488ada4..27bf8706417d3e7ce75ed9aaed6727ce24c74665 100644 (file)
--- 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>