Completer: Move autosubmit logic into the timer onFocusOut

Author: raviks789

asset/js/widget/Completer.js

@@ -323,8 +323,10 @@ define(["../notjQuery"], function ($) {
 
             if (! stopAtEdge && this.completedValue !== null) {
                 if (input === this.completedInput) {
+                    this.hasBeenManuallyChanged = true;
                     this.suggest(this.completedInput, this.completedValue);
                 } else {
+                    this.hasBeenManuallyChanged = false;
                     this.suggest(this.completedInput, input.value, { ...input.dataset });
                 }
             }
@@ -478,16 +480,20 @@ define(["../notjQuery"], function ($) {
         }
 
         onFocusOut(event) {
-            // Autosubmit if the user leaves the input and the input has been manually changed.
-            // Only for non-instrumented mode — instrumented inputs (e.g. TermInput) handle
-            // autosubmit themselves via BaseInput.autoSubmit() with proper term data.
-            if (! this.instrumented && this.hasBeenManuallyChanged && this.shouldAutoSubmit()) {
-                this.hasBeenManuallyChanged = false;
-                let input = event.target;
-                setTimeout(() => {
-                    $(input.form).trigger('submit', { submittedBy: input });
-                }, 300);
-            }
+            setTimeout(() => {
+                // Autosubmit if the user leaves the input and the input has been manually changed.
+                // Only for non-instrumented mode — instrumented inputs (e.g. TermInput) handle
+                // autosubmit themselves via BaseInput.autoSubmit() with proper term data.
+                if (
+                    ! this.instrumented
+                    && this.hasBeenManuallyChanged
+                    && ! this.hasSuggestions()
+                    && this.shouldAutoSubmit()
+                ) {
+                    this.hasBeenManuallyChanged = false;
+                    $(this.input.form).trigger('submit', {submittedBy: this.input});
+                }
+            }, 300);
 
             if (this.completedInput === null) {
                 // If there are multiple instances of Completer bound to the same suggestion container
@@ -511,6 +517,7 @@ define(["../notjQuery"], function ($) {
                     }
 
                     this.hideSuggestions();
+
                     this.hasBeenManuallyChanged = true;
                 }
             }, 250);
@@ -645,6 +652,10 @@ define(["../notjQuery"], function ($) {
 
         onKeyDown(event) {
             let suggestions;
+            const keys = ['Tab', 'ArrowDown', 'ArrowUp'];
+            if (keys.includes(event.key) && (event.target === this.input && this.hasSuggestions())) {
+                this.hasBeenManuallyChanged = false;
+            }
 
             switch (event.key) {
                 case ' ':
@@ -669,7 +680,6 @@ define(["../notjQuery"], function ($) {
                     break;
                 case 'Tab':
                     suggestions = this.termSuggestions.querySelectorAll('[type="button"]');
-                    this.hasBeenManuallyChanged = false;
                     if (suggestions.length === 1) {
                         event.preventDefault();
                         let input = event.target;
@@ -699,7 +709,6 @@ define(["../notjQuery"], function ($) {
                     break;
                 case 'ArrowUp':
                     suggestions = this.termSuggestions.querySelectorAll('[type="button"]');
-                    this.hasBeenManuallyChanged = false;
                     if (suggestions.length) {
                         event.preventDefault();
                         this.moveToSuggestion(true);
@@ -708,7 +717,6 @@ define(["../notjQuery"], function ($) {
                     break;
                 case 'ArrowDown':
                     suggestions = this.termSuggestions.querySelectorAll('[type="button"]');
-                    this.hasBeenManuallyChanged = false;
                     if (suggestions.length) {
                         event.preventDefault();
                         this.moveToSuggestion();
@@ -730,8 +738,6 @@ define(["../notjQuery"], function ($) {
 
         onInput(event) {
             let input = event.target;
-            this.hasBeenManuallyChanged = true;
-
             if (input.minLength > 0 && input.value.length < input.minLength) {
                 return;
             }
@@ -749,6 +755,7 @@ define(["../notjQuery"], function ($) {
                 dataElement.value = input.value;
             }
 
+            this.hasBeenManuallyChanged = true;
             let [value, data] = this.prepareCompletionData(input);
             this.completedInput = input;
             this.completedValue = value;