From 083c89b778939d6a3b1acf00284be99080267e1e Mon Sep 17 00:00:00 2001
From: yan <yan@mit.edu>
Date: Tue, 11 Oct 2016 15:18:22 -0700
Subject: [PATCH] Potential fix for URL bar lag, 2nd try

similar to 9e9815434a569d733a10ff077b8198d525fbc4de but handles
urlbar suffix insertion better.
---
 js/components/urlBar.js | 20 ++++++++++++++------
 1 file changed, 14 insertions(+), 6 deletions(-)

diff --git a/js/components/urlBar.js b/js/components/urlBar.js
index aa7644f1d04..b3552065d02 100644
--- a/js/components/urlBar.js
+++ b/js/components/urlBar.js
@@ -48,7 +48,7 @@ class UrlBar extends ImmutableComponent {
     return windowStore.getFrame(this.props.activeFrameKey)
   }
 
-  isActive () {
+  get isActive () {
     return this.props.urlbar.get('active')
   }
 
@@ -285,13 +285,18 @@ class UrlBar extends ImmutableComponent {
   }
 
   componentDidUpdate (prevProps) {
-    this.updateDOM()
     // Select the part of the URL which was an autocomplete suffix.
-    if (this.urlInput && this.props.locationValueSuffix.length > 0) {
-      const len = this.urlInput.value.length
+    if (this.urlInput && this.props.locationValueSuffix.length > 0 &&
+      this.props.urlbar.get('location') !== prevProps.urlbar.get('location')) {
       const suffixLen = this.props.locationValueSuffix.length
+      this.urlInput.value = this.locationValue + this.props.locationValueSuffix
+      const len = this.urlInput.value.length
       this.urlInput.setSelectionRange(len - suffixLen, len)
     }
+    if (this.isSelected() !== prevProps.urlbar.get('selected') ||
+      this.isFocused() !== prevProps.urlbar.get('focused')) {
+      this.updateDOM()
+    }
   }
 
   get hostValue () {
@@ -370,6 +375,9 @@ class UrlBar extends ImmutableComponent {
   }
 
   render () {
+    const value = !this.isActive
+      ? this.locationValue + this.props.locationValueSuffix
+      : undefined
     return <form
       className='urlbarForm'
       action='#'
@@ -412,10 +420,10 @@ class UrlBar extends ImmutableComponent {
           onFocus={this.onFocus}
           onBlur={this.onBlur}
           onKeyDown={this.onKeyDown}
-          onChange={this.onChange}
+          onKeyUp={this.onChange}
           onClick={this.onClick}
           onContextMenu={this.onContextMenu}
-          value={this.locationValue + this.props.locationValueSuffix}
+          value={value}
           data-l10n-id='urlbar'
           className={cx({
             insecure: !this.props.isSecure && this.props.loading === false && !this.isHTTPPage,