From 057d3eba2e07fd035a826f5eeed651149ced469f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Alexandre=20K=C3=BChn?= <aku@odoo.com>
Date: Thu, 12 Sep 2019 09:00:39 +0000
Subject: [PATCH] [FIX] web: use search view input with composition mode
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Forward-port of #36688 (original: #36284)

Before this commit, search view was barely usable with Japanese IME.

For instance, when pressing ENTER while in composition mode and
IME prompts some suggestions, it made a search with the updated input
content. The expected behaviour should have been to update the input
content, without making the search yet.

This commit fixes the issue by turning off some actions of the
search view when typing during composition mode.

opw-2061590

closes odoo/odoo#36728

Signed-off-by: Alexandre Kühn (aku) <aku@odoo.com>
---
 .../views/control_panel/search/search_bar.js  | 20 +++++++++++++++++++
 .../control_panel/search/search_facet.js      | 20 +++++++++++++++++++
 .../static/src/js/widgets/auto_complete.js    | 14 +++++++++++--
 3 files changed, 52 insertions(+), 2 deletions(-)

diff --git a/addons/web/static/src/js/views/control_panel/search/search_bar.js b/addons/web/static/src/js/views/control_panel/search/search_bar.js
index 6248489922c..9063b2aca50 100644
--- a/addons/web/static/src/js/views/control_panel/search/search_bar.js
+++ b/addons/web/static/src/js/views/control_panel/search/search_bar.js
@@ -9,6 +9,8 @@ var Widget = require('web.Widget');
 var SearchBar = Widget.extend({
     template: 'SearchView.SearchBar',
     events: _.extend({}, Widget.prototype.events, {
+        'compositionend .o_searchview_input': '_onCompositionendInput',
+        'compositionstart .o_searchview_input': '_onCompositionstartInput',
         'keydown': '_onKeydown',
     }),
     /**
@@ -34,6 +36,7 @@ var SearchBar = Widget.extend({
 
         this.autoCompleteSources = [];
         this.searchFacets = [];
+        this._isInputComposing = false;
     },
     /**
      * @override
@@ -207,11 +210,28 @@ var SearchBar = Widget.extend({
             });
         }
     },
+    /**
+     * @rivate
+     * @param {CompositionEvent} ev
+     */
+    _onCompositionendInput: function () {
+        this._isInputComposing = false;
+    },
+    /**
+     * @rivate
+     * @param {CompositionEvent} ev
+     */
+    _onCompositionstartInput: function () {
+        this._isInputComposing = true;
+    },
     /**
      * @private
      * @param {KeyEvent} e
      */
     _onKeydown: function (e) {
+        if (this._isInputComposing) {
+            return;
+        }
         switch(e.which) {
             case $.ui.keyCode.LEFT:
                 this._focusPreceding();
diff --git a/addons/web/static/src/js/views/control_panel/search/search_facet.js b/addons/web/static/src/js/views/control_panel/search/search_facet.js
index ca9a7ad6225..3f18597cccf 100644
--- a/addons/web/static/src/js/views/control_panel/search/search_facet.js
+++ b/addons/web/static/src/js/views/control_panel/search/search_facet.js
@@ -10,6 +10,8 @@ var SearchFacet = Widget.extend({
     template: 'SearchView.SearchFacet',
     events: _.extend({}, Widget.prototype.events, {
         'click .o_facet_remove': '_onFacetRemove',
+        'compositionend': '_onCompositionend',
+        'compositionstart': '_onCompositionstart',
         'keydown': '_onKeydown',
     }),
     /**
@@ -26,6 +28,7 @@ var SearchFacet = Widget.extend({
         });
         this.separator = this._getSeparator();
         this.icon = this._getIcon();
+        this._isComposing = false;
     },
 
     //--------------------------------------------------------------------------
@@ -105,6 +108,20 @@ var SearchFacet = Widget.extend({
     // Handlers
     //--------------------------------------------------------------------------
 
+    /**
+     * @private
+     * @param {CompositionEvent} ev
+     */
+    _onCompositionend: function (ev) {
+        this._isComposing = false;
+    },
+    /**
+     * @private
+     * @param {CompositionEvent} ev
+     */
+    _onCompositionstart: function (ev) {
+        this._isComposing = true;
+    },
     /**
      * @private
      */
@@ -116,6 +133,9 @@ var SearchFacet = Widget.extend({
      * @param {KeyboardEvent} ev
      */
     _onKeydown: function (ev) {
+        if (this._isComposing) {
+            return;
+        }
         switch (ev.which) {
             case $.ui.keyCode.BACKSPACE:
                 this.trigger_up('facet_removed', {group: this.facet});
diff --git a/addons/web/static/src/js/widgets/auto_complete.js b/addons/web/static/src/js/widgets/auto_complete.js
index 1bb00be8d38..30c38690d17 100644
--- a/addons/web/static/src/js/widgets/auto_complete.js
+++ b/addons/web/static/src/js/widgets/auto_complete.js
@@ -29,16 +29,23 @@ return Widget.extend({
         this.searching = true;
         this.search_string = '';
         this.current_search = null;
+        this._isInputComposing = false;
     },
     start: function () {
         var self = this;
+        this.$input.on('compositionend', function (ev) {
+            self._isInputComposing = false;
+        });
+        this.$input.on('compositionstart', function (ev) {
+            self._isInputComposing = true;
+        });
         this.$input.on('keyup', function (ev) {
-            if (ev.which === $.ui.keyCode.RIGHT) {
+            if (ev.which === $.ui.keyCode.RIGHT && !self._isInputComposing) {
                 self.searching = true;
                 ev.preventDefault();
                 return;
             }
-            if (ev.which === $.ui.keyCode.ENTER) {
+            if (ev.which === $.ui.keyCode.ENTER && !self._isInputComposing) {
                 if (self.search_string.length) {
                     self.select_item(ev);
                 }
@@ -68,6 +75,9 @@ return Widget.extend({
             }
         });
         this.$input.on('keydown', function (ev) {
+            if (self._isInputComposing) {
+                return;
+            }
             switch (ev.which) {
                 case $.ui.keyCode.ENTER: