From d960bd978c2b2f368ce6918cf4ed6370e7404cec Mon Sep 17 00:00:00 2001
From: Yuri Kuznetsov <yurikuzn@users.noreply.github.com>
Date: Fri, 8 Jul 2022 09:42:41 +0300
Subject: [PATCH] fields search on enter

---
 client/res/templates/fields/array/search.tpl  |  2 +-
 client/res/templates/fields/base/search.tpl   | 14 ++++++--
 client/res/templates/fields/date/search.tpl   | 34 +++++++++++++++---
 client/res/templates/fields/int/search.tpl    | 25 +++++++++++--
 .../templates/fields/link-multiple/search.tpl |  2 +-
 .../templates/fields/link-parent/search.tpl   | 16 +++++++--
 client/res/templates/fields/link/search.tpl   |  2 +-
 client/res/templates/fields/text/search.tpl   | 12 +++++--
 client/res/templates/fields/user/search.tpl   |  6 ++--
 .../res/templates/fields/varchar/search.tpl   | 15 ++++++--
 client/src/views/fields/array.js              | 13 ++++---
 client/src/views/fields/base.js               |  6 ++++
 client/src/views/fields/enum.js               |  1 +
 client/src/views/fields/multi-enum.js         |  1 +
 client/src/views/record/search.js             |  5 +++
 client/src/views/search/filter.js             | 36 ++++++++++++++-----
 16 files changed, 154 insertions(+), 36 deletions(-)

diff --git a/client/res/templates/fields/array/search.tpl b/client/res/templates/fields/array/search.tpl
index 0ea4f5899f..f2703d29f5 100644
--- a/client/res/templates/fields/array/search.tpl
+++ b/client/res/templates/fields/array/search.tpl
@@ -4,4 +4,4 @@
 </select>
 <div class="input-container">
     <input class="main-element" type="text" autocomplete="espo-off">
-</div>
\ No newline at end of file
+</div>
diff --git a/client/res/templates/fields/base/search.tpl b/client/res/templates/fields/base/search.tpl
index 391eaf940c..4e034c1568 100644
--- a/client/res/templates/fields/base/search.tpl
+++ b/client/res/templates/fields/base/search.tpl
@@ -1,2 +1,12 @@
-
-<input type="text" class="main-element form-control input-sm" data-name="{{name}}" value="{{searchParams.value}}" {{#if params.maxLength}} maxlength="{{params.maxLength}}"{{/if}}{{#if params.size}} size="{{params.size}}"{{/if}} autocomplete="espo-{{name}}">
+<input
+    type="text"
+    class="main-element form-control input-sm search-input"
+    data-name="{{name}}"
+    value="{{searchParams.value}}" {{#if params.maxLength}}
+    maxlength="{{params.maxLength}}"{{/if}}{{#if params.size}}
+    size="{{params.size}}"{{/if}}
+    autocomplete="espo-{{name}}"
+    {{#if noSpellCheck}}
+    spellcheck="false"
+    {{/if}}
+>
diff --git a/client/res/templates/fields/date/search.tpl b/client/res/templates/fields/date/search.tpl
index 869bba875f..46765db7e6 100644
--- a/client/res/templates/fields/date/search.tpl
+++ b/client/res/templates/fields/date/search.tpl
@@ -2,17 +2,41 @@
     {{options searchTypeList searchType field='dateSearchRanges'}}
 </select>
 <div class="input-group primary">
-    <input class="main-element form-control input-sm" type="text" data-name="{{name}}" value="{{dateValue}}" autocomplete="espo-{{name}}">
+    <input
+        class="main-element form-control input-sm search-input"
+        type="text"
+        data-name="{{name}}"
+        value="{{dateValue}}"
+        autocomplete="espo-{{name}}"
+    >
     <span class="input-group-btn">
-        <button type="button" class="btn btn-default btn-icon btn-sm date-picker-btn" tabindex="-1"><i class="far fa-calendar"></i></button>
+        <button
+            type="button"
+            class="btn btn-default btn-icon btn-sm date-picker-btn"
+            tabindex="-1"
+        ><i class="far fa-calendar"></i></button>
     </span>
 </div>
 <div class="input-group{{#ifNotEqual searchType 'between'}} hidden{{/ifNotEqual}} additional">
-    <input class="main-element form-control input-sm additional" type="text" value="{{dateValueTo}}" autocomplete="espo-{{name}}">
+    <input
+        class="main-element form-control input-sm additional search-input"
+        type="text"
+        value="{{dateValueTo}}"
+        autocomplete="espo-{{name}}"
+    >
     <span class="input-group-btn">
-        <button type="button" class="btn btn-default btn-icon btn-sm date-picker-btn" tabindex="-1"><i class="far fa-calendar"></i></button>
+        <button
+            type="button"
+            class="btn btn-default btn-icon btn-sm date-picker-btn"
+            tabindex="-1"><i class="far fa-calendar"></i></button>
     </span>
 </div>
 <div class="hidden additional-number">
-    <input class="main-element form-control input-sm number" type="number" value="{{number}}" placeholder ="{{translate 'Number'}}" autocomplete="espo-{{name}}">
+    <input
+        class="main-element form-control input-sm number search-input"
+        type="number"
+        value="{{number}}"
+        placeholder ="{{translate 'Number'}}"
+        autocomplete="espo-{{name}}"
+    >
 </div>
diff --git a/client/res/templates/fields/int/search.tpl b/client/res/templates/fields/int/search.tpl
index fe868d5b44..13e99767e4 100644
--- a/client/res/templates/fields/int/search.tpl
+++ b/client/res/templates/fields/int/search.tpl
@@ -1,6 +1,25 @@
-
 <select class="form-control search-type input-sm">
     {{options searchTypeList searchType field='intSearchRanges'}}
 </select>
-<input type="text" class="form-control input-sm hidden" data-name="{{name}}" value="{{value}}" pattern="[\-]?[0-9]*" {{#if params.maxLength}} maxlength="{{params.maxLength}}"{{/if}} placeholder="{{translate 'Value'}}" autocomplete="espo-{{name}}">
-<input type="text" class="form-control{{#ifNotEqual searchType 'between'}} hidden{{/ifNotEqual}} additional input-sm" data-name="{{name}}-additional" value="{{value2}}" pattern="[\-]?[0-9]*" {{#if params.maxLength}} maxlength="{{params.maxLength}}"{{/if}} placeholder="{{translate 'Value'}}" autocomplete="espo-{{name}}-additional">
+<input
+    type="text"
+    class="form-control input-sm hidden search-input"
+    data-name="{{name}}"
+    value="{{value}}"
+    pattern="[\-]?[0-9]*"
+    {{#if params.maxLength}} maxlength="{{params.maxLength}}"{{/if}}
+    placeholder="{{translate 'Value'}}"
+    autocomplete="espo-{{name}}"
+    spellcheck="false"
+>
+<input
+    type="text"
+    class="form-control{{#ifNotEqual searchType 'between'}} hidden{{/ifNotEqual}} additional input-sm search-input"
+    data-name="{{name}}-additional"
+    value="{{value2}}"
+    pattern="[\-]?[0-9]*"
+    {{#if params.maxLength}} maxlength="{{params.maxLength}}"{{/if}}
+    placeholder="{{translate 'Value'}}"
+    autocomplete="espo-{{name}}-additional"
+    spellcheck="false"
+>
diff --git a/client/res/templates/fields/link-multiple/search.tpl b/client/res/templates/fields/link-multiple/search.tpl
index ef0a408a25..604306710f 100644
--- a/client/res/templates/fields/link-multiple/search.tpl
+++ b/client/res/templates/fields/link-multiple/search.tpl
@@ -9,7 +9,7 @@
 
     <div class="input-group add-team">
         <input
-            class="main-element form-control input-sm"
+            class="main-element form-control input-sm search-input"
             type="text"
             value=""
             autocomplete="espo-{{name}}"
diff --git a/client/res/templates/fields/link-parent/search.tpl b/client/res/templates/fields/link-parent/search.tpl
index 0bd47f8ee5..c8ac40fa8e 100644
--- a/client/res/templates/fields/link-parent/search.tpl
+++ b/client/res/templates/fields/link-parent/search.tpl
@@ -7,7 +7,7 @@
     </select>
     <div class="input-group">
         <input
-            class="form-control input-sm"
+            class="form-control input-sm search-input"
             type="text"
             data-name="{{nameName}}"
             value="{{searchData.nameValue}}"
@@ -16,8 +16,18 @@
             spellcheck="false"
         >
         <span class="input-group-btn">
-            <button type="button" class="btn btn-sm btn-default btn-icon" data-action="selectLink" tabindex="-1" title="{{translate 'Select'}}"><i class="fas fa-angle-up"></i></button>
-            <button type="button" class="btn btn-sm btn-default btn-icon" data-action="clearLink" tabindex="-1"><i class="fas fa-times"></i></button>
+            <button
+                type="button"
+                class="btn btn-sm btn-default btn-icon"
+                data-action="selectLink"
+                tabindex="-1"
+                title="{{translate 'Select'}}"><i class="fas fa-angle-up"></i></button>
+            <button
+                type="button"
+                class="btn btn-sm btn-default btn-icon"
+                data-action="clearLink"
+                tabindex="-1"
+            ><i class="fas fa-times"></i></button>
         </span>
     </div>
     <input type="hidden" data-name="{{idName}}" value="{{searchData.idValue}}">
diff --git a/client/res/templates/fields/link/search.tpl b/client/res/templates/fields/link/search.tpl
index 6a65ba4a28..4c7c146ffa 100644
--- a/client/res/templates/fields/link/search.tpl
+++ b/client/res/templates/fields/link/search.tpl
@@ -4,7 +4,7 @@
 <div class="primary">
 	<div class="input-group">
 	    <input
-            class="form-control input-sm"
+            class="form-control input-sm search-input"
             type="text"
             data-name="{{nameName}}"
             value="{{searchData.nameValue}}"
diff --git a/client/res/templates/fields/text/search.tpl b/client/res/templates/fields/text/search.tpl
index 2e2c2a973c..f3ef1dbd1b 100644
--- a/client/res/templates/fields/text/search.tpl
+++ b/client/res/templates/fields/text/search.tpl
@@ -1,5 +1,13 @@
-
 <select class="form-control search-type input-sm">
     {{options searchTypeList searchType field='varcharSearchRanges'}}
 </select>
-<input type="text" class="main-element form-control input-sm" data-name="{{name}}" value="{{searchData.value}}" {{#if params.maxLength}} maxlength="{{params.maxLength}}"{{/if}}{{#if params.size}} size="{{params.size}}"{{/if}} autocomplete="espo-{{name}}" placeholder="{{translate 'Value'}}">
+<input
+    type="text"
+    class="main-element form-control input-sm search-input"
+    data-name="{{name}}"
+    value="{{searchData.value}}"
+    {{#if params.maxLength}}maxlength="{{params.maxLength}}"{{/if}}
+    {{#if params.size}} size="{{params.size}}"{{/if}}
+    autocomplete="espo-{{name}}"
+    placeholder="{{translate 'Value'}}"
+>
diff --git a/client/res/templates/fields/user/search.tpl b/client/res/templates/fields/user/search.tpl
index 6f9c328372..f8f276ee77 100644
--- a/client/res/templates/fields/user/search.tpl
+++ b/client/res/templates/fields/user/search.tpl
@@ -4,7 +4,7 @@
 <div class="primary">
 	<div class="input-group">
 	    <input
-            class="form-control input-sm"
+            class="form-control input-sm search-input"
             type="text"
             data-name="{{nameName}}"
             value="{{searchData.nameValue}}"
@@ -37,7 +37,7 @@
 
     <div class="input-group add-team">
         <input
-            class="form-control input-sm element-one-of"
+            class="form-control input-sm element-one-of search-input"
             type="text"
             value=""
             autocomplete="espo-{{name}}"
@@ -61,7 +61,7 @@
     </div>
     <div class="input-group add-team">
         <input
-            class="form-control input-sm element-teams"
+            class="form-control input-sm element-teams search-input"
             type="text"
             value=""
             autocomplete="espo-{{name}}"
diff --git a/client/res/templates/fields/varchar/search.tpl b/client/res/templates/fields/varchar/search.tpl
index 2e2c2a973c..4b7ac4812d 100644
--- a/client/res/templates/fields/varchar/search.tpl
+++ b/client/res/templates/fields/varchar/search.tpl
@@ -1,5 +1,16 @@
-
 <select class="form-control search-type input-sm">
     {{options searchTypeList searchType field='varcharSearchRanges'}}
 </select>
-<input type="text" class="main-element form-control input-sm" data-name="{{name}}" value="{{searchData.value}}" {{#if params.maxLength}} maxlength="{{params.maxLength}}"{{/if}}{{#if params.size}} size="{{params.size}}"{{/if}} autocomplete="espo-{{name}}" placeholder="{{translate 'Value'}}">
+<input
+    type="text"
+    class="main-element form-control input-sm search-input"
+    data-name="{{name}}"
+    value="{{searchData.value}}" {{#if params.maxLength}}
+    maxlength="{{params.maxLength}}"{{/if}}{{#if params.size}}
+    size="{{params.size}}"{{/if}}
+    autocomplete="espo-{{name}}"
+    placeholder="{{translate 'Value'}}"
+    {{#if noSpellCheck}}
+    spellcheck="false"
+    {{/if}}
+>
diff --git a/client/src/views/fields/array.js b/client/src/views/fields/array.js
index b51bc1e387..44ea148382 100644
--- a/client/src/views/fields/array.js
+++ b/client/src/views/fields/array.js
@@ -176,11 +176,15 @@ function (Dep, Selectize, RegExpPattern, _) {
         },
 
         setupSearch: function () {
-            this.events = _.extend({
-                'change select.search-type': (e) => {
-                    this.handleSearchType($(e.currentTarget).val());
+            this.events['change select.search-type'] = e => {
+                this.handleSearchType($(e.currentTarget).val());
+            };
+
+            this.events['keydown .selectize-input input'] = e => {
+                if ('keyCode' in e && e.keyCode === 13) {
+                    //this.trigger('search');
                 }
-            }, this.events || {});
+            };
         },
 
         handleSearchType: function (type) {
@@ -411,6 +415,7 @@ function (Dep, Selectize, RegExpPattern, _) {
                 highlight: false,
                 searchField: ['label'],
                 plugins: ['remove_button'],
+                selectOnTab: false,
             };
 
             if (!this.matchAnyWord) {
diff --git a/client/src/views/fields/base.js b/client/src/views/fields/base.js
index 65be836474..7ac80e3e26 100644
--- a/client/src/views/fields/base.js
+++ b/client/src/views/fields/base.js
@@ -674,6 +674,12 @@ define('views/fields/base', ['view'], function (Dep) {
                 this.searchParams = _.clone(this.options.searchParams || {});
                 this.searchData = {};
                 this.setupSearch();
+
+                this.events['keydown input.search-input'] = e => {
+                    if ('keyCode' in e && e.keyCode === 13) {
+                        this.trigger('search');
+                    }
+                };
             }
 
             this.on('highlight', () => {
diff --git a/client/src/views/fields/enum.js b/client/src/views/fields/enum.js
index 3033d46f36..8bf6a91e1a 100644
--- a/client/src/views/fields/enum.js
+++ b/client/src/views/fields/enum.js
@@ -321,6 +321,7 @@ function (Dep, Selectize, _) {
                     highlight: false,
                     searchField: ['label'],
                     plugins: ['remove_button'],
+                    selectOnTab: false,
                     score: function (search) {
                         // Method of selectize.
                         let score = this.getScoreFunction(search);
diff --git a/client/src/views/fields/multi-enum.js b/client/src/views/fields/multi-enum.js
index 29e0467ea4..351cc5354b 100644
--- a/client/src/views/fields/multi-enum.js
+++ b/client/src/views/fields/multi-enum.js
@@ -212,6 +212,7 @@ function (Dep, RegExpPattern, Selectize) {
                     searchField: ['label'],
                     plugins: pluginList,
                     copyClassesToDropdown: true,
+                    selectOnTab: false,
                 };
 
                 if (!this.matchAnyWord) {
diff --git a/client/src/views/record/search.js b/client/src/views/record/search.js
index 3c20704ccf..f737ab4b2e 100644
--- a/client/src/views/record/search.js
+++ b/client/src/views/record/search.js
@@ -930,6 +930,11 @@ define('views/record/search', ['view'], function (Dep) {
 
                     this.showApplyFiltersButton();
                 });
+
+                this.listenTo(view, 'search', () => {
+                    this.search();
+                    this.hideApplyFiltersButton();
+                });
             });
         },
 
diff --git a/client/src/views/search/filter.js b/client/src/views/search/filter.js
index ba3ffcb0bf..e87c900988 100644
--- a/client/src/views/search/filter.js
+++ b/client/src/views/search/filter.js
@@ -26,9 +26,15 @@
  * these Appropriate Legal Notices must retain the display of the "EspoCRM" word.
  ************************************************************************/
 
-define('views/search/filter', 'view', function (Dep) {
+define('views/search/filter', ['view'], function (Dep) {
 
-    return Dep.extend({
+    /**
+     * @class
+     * @name Class
+     * @extends module:view.Class
+     * @memberOf module:views/search/filter
+     */
+    return Dep.extend(/** @lends module:views/search/filter.Class# */{
 
         template: 'search/filter',
 
@@ -41,11 +47,12 @@ define('views/search/filter', 'view', function (Dep) {
         },
 
         setup: function () {
-            var name = this.name = this.options.name;
-            var type = this.model.getFieldType(name);
+            let name = this.name = this.options.name;
+            let type = this.model.getFieldType(name);
 
             if (type) {
-                var viewName = this.model.getFieldParam(name, 'view') || this.getFieldManager().getViewName(type);
+                let viewName = this.model.getFieldParam(name, 'view') ||
+                    this.getFieldManager().getViewName(type);
 
                 this.createView('field', viewName, {
                     mode: 'search',
@@ -55,16 +62,27 @@ define('views/search/filter', 'view', function (Dep) {
                         name: name,
                     },
                     searchParams: this.options.params,
-                }, function (view) {
-                    this.listenTo(view, 'change', function () {
+                }, (view) => {
+                    this.listenTo(view, 'change', () => {
                         this.trigger('change');
-                    }, this);
+                    });
+
+                    this.listenTo(view, 'search', () => {
+                        this.trigger('search');
+                    });
                 });
             }
         },
 
+        /**
+         * @return {module:views/fields/base.Class}
+         */
+        getFieldView: function () {
+            return this.getView('field');
+        },
+
         populateDefaults: function () {
-            var view = this.getView('field');
+            let view = this.getView('field');
 
             if (!view) {
                 return;