Fix URL bar autocomplete flashing as you type

Fix #6644

Auditors: @bsclifton

Author: bbondy

CHANGELOG.md

@@ -1,8 +1,9 @@
 # Changelog
 
 ## [0.13.0](https://github.com/brave/browser-laptop/releases/v0.13.0dev)
-- Linux sandbox added. ([#874])
-- Window renderer processes no longer include Node, content renderer never did in Brave. ([#6454])
+- Linux sandbox added. ([#874](https://github.com/brave/browser-laptop/issues/874))
+- Window renderer processes no longer include Node, content renderer never did in Brave. ([#6454](https://github.com/brave/browser-laptop/issues/6454))
+- URL bar autocomplete no longer flashes when you enter text. ([#6644](https://github.com/brave/browser-laptop/issues/6644))
 - Muon updated to 2.0.10.
 - Chromium updated to 54.0.2840.100.
 

app/renderer/components/urlBar.js

@@ -32,6 +32,7 @@ class UrlBar extends ImmutableComponent {
     this.onKeyDown = this.onKeyDown.bind(this)
     this.onKeyUp = this.onKeyUp.bind(this)
     this.onChange = this.onChange.bind(this)
+    this.onKeyPress = this.onKeyPress.bind(this)
     this.onClick = this.onClick.bind(this)
     this.onContextMenu = this.onContextMenu.bind(this)
     this.keyPressed = false
@@ -295,6 +296,22 @@ class UrlBar extends ImmutableComponent {
     }
   }
 
+  onKeyPress (e) {
+    // If we're just continuing an autocomplete then prevent a change event
+    const last = this.lastVal + this.lastSuffix
+    const newValue = this.lastVal + String.fromCharCode(e.which)
+    if (last.startsWith(newValue)) {
+      const newSuffix = last.substring(newValue.length)
+      this.setValue(newValue, newSuffix)
+      windowActions.setNavBarUserInput(newValue)
+      this.urlInput.setSelectionRange(newValue.length, newValue.length + newSuffix.length + 1)
+      if (this.suggestionLocation) {
+        windowActions.setUrlBarSuggestions(undefined, null)
+      }
+      e.preventDefault()
+    }
+  }
+
   onChange (e) {
     this.setValue(e.target.value)
     if (this.suggestionLocation) {
@@ -306,7 +323,11 @@ class UrlBar extends ImmutableComponent {
   // part was set for the value.
   setValue (val, suffix) {
     this.lastVal = val
-    this.urlInput.value = val + (suffix || '')
+    this.lastSuffix = suffix
+    const newValue = val + (suffix || '')
+    if (this.urlInput.value !== newValue) {
+      this.urlInput.value = newValue
+    }
   }
 
   onKeyUp (e) {
@@ -488,6 +509,7 @@ class UrlBar extends ImmutableComponent {
           onKeyDown={this.onKeyDown}
           onKeyUp={this.onKeyUp}
           onChange={this.onChange}
+          onKeyPress={this.onKeyPress}
           onClick={this.onClick}
           onContextMenu={this.onContextMenu}
           data-l10n-id='urlbar'

test/components/navigationBarTest.js

@@ -902,20 +902,13 @@ describe('navigationBar tests', function () {
         })
 
         it('urlbar shows webview url when focused', function * () {
-          var page1 = this.page1
           yield blur(this.app.client)
-          yield this.app.client.waitUntil(function () {
-            return this.isExisting(urlInput).then((exists) => exists === false)
-          })
           yield this.app.client
+            .waitForElementCount(urlInput, 0)
             .ipcSend('shortcut-focus-url')
-          yield this.app.client.waitUntil(function () {
-            return this.getValue(urlInput).then((val) => val === page1)
-          })
-          yield this.app.client.keys('abc')
-          yield this.app.client.waitUntil(function () {
-            return this.getValue(urlInput).then((val) => val === 'abc')
-          })
+            .waitForInputText(urlInput, this.page1)
+            .keys('zzz')
+            .waitForInputText(urlInput, 'zzz')
         })
       })