Typed input in tab is not always retained when changing tabs

Auditors: @aekeus

Fix #5585

js/components/urlBar.js

@@ -364,8 +364,17 @@ class UrlBar extends ImmutableComponent {
   componentDidUpdate (prevProps) {
     // this.urlInput is not initialized in titleMode
     if (this.urlInput) {
-      // Select the part of the URL which was an autocomplete suffix.
-      if (this.props.location !== prevProps.location) {
+      if (this.props.activeFrameKey !== prevProps.activeFrameKey) {
+        // The user just changed tabs
+        this.urlInput.value = UrlUtil.getDisplayLocation(this.props.urlbar.get('location'), getSetting(settings.PDFJS_ENABLED))
+        // Each tab has a focused state stored separately
+        if (this.isFocused()) {
+          this.focus()
+        }
+        windowActions.setUrlBarSuggestions(undefined, null)
+        windowActions.setRenderUrlBarSuggestions(false)
+      } else if (this.props.location !== prevProps.location) {
+        // This is a url nav change
         this.urlInput.value = UrlUtil.getDisplayLocation(this.props.location, getSetting(settings.PDFJS_ENABLED))
       } else if (this.props.locationValueSuffix.length > 0 && this.isActive &&
         (this.props.locationValueSuffix !== prevProps.locationValueSuffix ||

test/components/urlBarTest.js

@@ -4,6 +4,7 @@ const Brave = require('../lib/brave')
 const {urlInput, urlBarSuggestions, urlbarIcon, activeWebview} = require('../lib/selectors')
 const searchProviders = require('../../js/data/searchProviders')
 const config = require('../../js/constants/config')
+const messages = require('../../js/constants/messages')
 
 describe('urlBar tests', function () {
   function * setup (client) {
@@ -298,4 +299,67 @@ describe('urlBar tests', function () {
       })
     })
   })
+
+  const tabLoadingTest = function * () {
+    const coffee = 'coffee'
+    yield this.app.client
+      .windowByUrl(Brave.browserWindowUrl)
+      .ipcSend('shortcut-focus-url')
+      .waitForElementFocus(urlInput)
+      .keys(coffee)
+      .waitUntil(function () {
+        return this.getValue(urlInput).then((val) => val === coffee)
+      })
+      .click('.tab[data-frame-key="1"]')
+      .waitUntil(function () {
+        return this.getValue(urlInput).then((val) => val !== coffee)
+      })
+      .click('.tab[data-frame-key="2"]')
+      .waitUntil(function () {
+        return this.getValue(urlInput).then((val) => val === coffee)
+      })
+  }
+
+  describe('location bar with loaded tabs', function () {
+    Brave.beforeAll(this)
+
+    before(function * () {
+      this.page1Url = Brave.server.url('page1.html')
+      this.page2Url = Brave.server.url('page2.html')
+      yield setup(this.app.client)
+      yield this.app.client.waitForExist(urlInput)
+      yield this.app.client.waitForElementFocus(urlInput)
+      yield this.app.client.waitUntil(function () {
+        return this.getValue(urlInput).then((val) => val === '')
+      })
+      .tabByIndex(0)
+      .loadUrl(this.page1Url)
+      .windowByUrl(Brave.browserWindowUrl)
+      .ipcSend(messages.SHORTCUT_NEW_FRAME)
+      .waitForUrl(Brave.newTabUrl)
+      .tabByIndex(1)
+      .loadUrl(this.page2Url)
+    })
+
+    it('Retains user input on tab switches', tabLoadingTest)
+  })
+
+  describe('location bar with new tabs', function () {
+    Brave.beforeAll(this)
+
+    before(function * () {
+      yield setup(this.app.client)
+      yield this.app.client.waitForExist(urlInput)
+      yield this.app.client.waitForElementFocus(urlInput)
+      yield this.app.client.waitUntil(function () {
+        return this.getValue(urlInput).then((val) => val === '')
+      })
+      .windowByUrl(Brave.browserWindowUrl)
+      .ipcSend(messages.SHORTCUT_NEW_FRAME)
+      .waitForUrl(Brave.newTabUrl)
+      .tabByIndex(1)
+    })
+
+    it('Retains user input on tab switches', tabLoadingTest)
+  })
 })