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 #4731

Auditors: @bbondy

Test Plan:
1. open new tab
2. type 'about'
3. verify that no characters are lost

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='#'

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')
+        })
+    })
   })
 })