From d102eed44ade40030abd12078655745fdb2c4a06 Mon Sep 17 00:00:00 2001
From: Anthony Tseng <darkdh@gmail.com>
Date: Mon, 4 Dec 2017 14:56:32 -0800
Subject: [PATCH] Using composition event to detect IME composition stage ends

fix #9139

Auditors: @bsclifton, @bbondy

Test Plan:

1. Make sure you have IME which has composition state
(like Zhuyin in Chinese, some Japanese IME)
2. Enter the characters in the IME, make sure doing some
add/remove/select characters before ending composition state
(mostly pressing enter)
3. Autocomplete will show only after you complete the words/sentences
---
 app/renderer/components/navigation/urlBar.js | 17 ++++++++++++++++-
 1 file changed, 16 insertions(+), 1 deletion(-)

diff --git a/app/renderer/components/navigation/urlBar.js b/app/renderer/components/navigation/urlBar.js
index 5bf23737e8c..c38f344294b 100644
--- a/app/renderer/components/navigation/urlBar.js
+++ b/app/renderer/components/navigation/urlBar.js
@@ -50,11 +50,13 @@ class UrlBar extends React.Component {
     super(props)
     this.lastVal = ''
     this.lastSuffix = ''
+    this.isOnComposition = false
     this.onFocus = this.onFocus.bind(this)
     this.onBlur = this.onBlur.bind(this)
     this.onKeyDown = this.onKeyDown.bind(this)
     this.onKeyUp = this.onKeyUp.bind(this)
     this.onChange = this.onChange.bind(this)
+    this.onComposition = this.onComposition.bind(this)
     this.onKeyPress = this.onKeyPress.bind(this)
     this.onClick = this.onClick.bind(this)
     this.onContextMenu = this.onContextMenu.bind(this)
@@ -262,12 +264,22 @@ class UrlBar extends React.Component {
   }
 
   onChange (e) {
-    if (e.target.value !== this.lastVal + this.lastSuffix) {
+    if (e.target.value !== this.lastVal + this.lastSuffix &&
+        !this.isOnComposition) {
       e.preventDefault()
       this.setValue(e.target.value)
     }
   }
 
+  onComposition (e) {
+    if (e.type === 'compositionend') {
+      this.isOnComposition = false
+      this.onChange(e)
+    } else {
+      this.isOnComposition = true
+    }
+  }
+
   getValue () {
     return this.lastVal + this.lastSuffix
   }
@@ -511,6 +523,9 @@ class UrlBar extends React.Component {
           onKeyUp={this.onKeyUp}
           onChange={this.onChange}
           onKeyPress={this.onKeyPress}
+          onCompositionStart={this.onComposition}
+          onCompositionUpdate={this.onComposition}
+          onCompositionEnd={this.onComposition}
           onClick={this.onClick}
           onContextMenu={this.onContextMenu}
           data-l10n-id='urlbar'