From 9d353d5fbd694141c0ba6e4f173b346671b63546 Mon Sep 17 00:00:00 2001
From: yan <yan@mit.edu>
Date: Fri, 14 Oct 2016 02:04:00 -0400
Subject: [PATCH] debounce urlbar autocompletes

Seems that characters are lost when the user is typing at the same type
an autocomplete result is inserted. Debouncing makes this happen less often.

Fix https://github.com/brave/browser-laptop/issues/4731

Auditors: @bbondy

Test Plan:
1. open new tab
2. type 'about'
3. verify that no characters are lost
---
 js/components/urlBar.js       | 20 ++++++++++++++------
 test/components/urlBarTest.js |  9 +++++++++
 2 files changed, 23 insertions(+), 6 deletions(-)

diff --git a/js/components/urlBar.js b/js/components/urlBar.js
index 5bdee09f47c..31e52d35bb7 100644
--- a/js/components/urlBar.js
+++ b/js/components/urlBar.js
@@ -10,6 +10,7 @@ const windowActions = require('../actions/windowActions')
 const appActions = require('../actions/appActions')
 const KeyCodes = require('../../app/common/constants/keyCodes')
 const cx = require('../lib/classSet')
+const debounce = require('../lib/debounce')
 const ipc = global.require('electron').ipcRenderer
 
 const UrlBarSuggestions = require('./urlBarSuggestions')
@@ -42,6 +43,12 @@ class UrlBar extends ImmutableComponent {
     this.onContextMenu = this.onContextMenu.bind(this)
     this.activateSearchEngine = false
     this.searchSelectEntry = null
+    this.showAutocompleteResult = debounce(() => {
+      const suffixLen = this.props.locationValueSuffix.length
+      this.urlInput.value = this.defaultValue
+      const len = this.defaultValue.length
+      this.urlInput.setSelectionRange(len - suffixLen, len)
+    }, 300)
   }
 
   get activeFrame () {
@@ -296,17 +303,18 @@ class UrlBar extends ImmutableComponent {
     this.updateDOM()
   }
 
+  get defaultValue () {
+    return this.locationValue + this.props.locationValueSuffix
+  }
+
   componentDidUpdate (prevProps) {
     // Select the part of the URL which was an autocomplete suffix.
     if (this.urlInput && this.props.locationValueSuffix.length > 0 &&
       (this.props.locationValueSuffix !== prevProps.locationValueSuffix ||
        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)
+      this.showAutocompleteResult()
     } else if (this.props.activeFrameKey !== prevProps.activeFrameKey) {
-      this.urlInput.value = this.locationValue + this.props.locationValueSuffix
+      this.urlInput.value = this.defaultValue
     }
     if (this.isSelected() !== prevProps.urlbar.get('selected') ||
       this.isFocused() !== prevProps.urlbar.get('focused')) {
@@ -392,7 +400,7 @@ class UrlBar extends ImmutableComponent {
   render () {
     const value = this.isActive || (!this.locationValue && this.isFocused())
       ? undefined
-      : this.locationValue + this.props.locationValueSuffix
+      : this.defaultValue
     return <form
       className='urlbarForm'
       action='#'
diff --git a/test/components/urlBarTest.js b/test/components/urlBarTest.js
index 51e1e85d515..f6cd6945a3f 100644
--- a/test/components/urlBarTest.js
+++ b/test/components/urlBarTest.js
@@ -78,5 +78,14 @@ describe('urlBar', function () {
             .then((val) => val === 'https://brave.com')
         })
     })
+
+    it('autocompletes without losing characters', function * () {
+      yield this.app.client
+        .keys('a\uE008\uE008b\uE008\uE008o\uE008\uE008u\uE008\uE008t\uE008\uE008x')
+        .waitUntil(function () {
+          return this.getValue(urlInput)
+            .then((val) => val === 'aboutx')
+        })
+    })
   })
 })