[FIX] web: use search view input with composition mode

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>

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();

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});

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: