[realbox] Ignore arrow keys and 'Enter' when composing input with IME

When composing input text with IME featuring candidate words dialog,
pressing the arrow keys produces KeyboardEvents with |isComposing|
property true. Ignoring those events prevents the selection from
changing in the realbox dropdown while still allowing the user to
select candidate words. Also since the 'Enter' key is used to confirm
a composition, that too should be ignored during IME composition.

Furthermore, when composing Korean (Hangul) input with IME, an
extraneous input event is fired when selection changes via the arrow
keys before the input text actually changes. This causes autocomplete
to be queried and the dropdown to flash producing an undesirable UX.
Ignoring input events when the input text remains unchanged prevents
that.

Note that cases in which the user types the next character in the
inline autocompletion and thus the input essentially remains unchanged
are handled in onInputKeydown_().

Bug: 1154327, 1167356
Change-Id: Idf6f95af03f44a469036e60f6f8c4f161a6048c1
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2628017Reviewed-by: Esmael Elmoslimany <aee@chromium.org>
Reviewed-by: Keren Zhu <kerenzhu@chromium.org>
Commit-Queue: Moe Ahmadi <mahmadi@chromium.org>
Cr-Commit-Position: refs/heads/master@{#845032}

chrome/browser/resources/new_tab_page/realbox.js

@@ -387,6 +387,11 @@ class RealboxElement extends PolymerElement {
    */
   onInputInput_(e) {
     const inputValue = this.$.input.value;
+    const lastInputValue = this.lastInput_.text + this.lastInput_.inline;
+    if (lastInputValue === inputValue) {
+      return;
+    }
+
     this.updateInput_({text: inputValue, inline: ''});
 
     const charTyped = !this.isDeletingInput_ && !!inputValue.trim();
@@ -550,6 +555,21 @@ class RealboxElement extends PolymerElement {
       return;
     }
 
+    if (e.key === 'Delete') {
+      if (e.shiftKey && !e.altKey && !e.ctrlKey && !e.metaKey) {
+        if (this.selectedMatch_ && this.selectedMatch_.supportsDeletion) {
+          this.pageHandler_.deleteAutocompleteMatch(this.selectedMatchIndex_);
+          e.preventDefault();
+        }
+      }
+      return;
+    }
+
+    // Do not handle the following keys if inside an IME composition session.
+    if (e.isComposing) {
+      return;
+    }
+
     if (e.key === 'Enter') {
       if ([this.$.matches, this.$.input].includes(e.target)) {
         if (this.lastQueriedInput_ !== null &&
@@ -569,16 +589,6 @@ class RealboxElement extends PolymerElement {
       return;
     }
 
-    if (e.key === 'Delete') {
-      if (e.shiftKey && !e.altKey && !e.ctrlKey && !e.metaKey) {
-        if (this.selectedMatch_ && this.selectedMatch_.supportsDeletion) {
-          this.pageHandler_.deleteAutocompleteMatch(this.selectedMatchIndex_);
-          e.preventDefault();
-        }
-      }
-      return;
-    }
-
     // Do not handle the following keys if there are key modifiers.
     if (e.altKey || e.ctrlKey || e.metaKey || e.shiftKey) {
       return;