diff --git a/webapp/components/browser-picker.js b/webapp/components/browser-picker.js
index fb313d1c1d..ff8f088d5a 100644
--- a/webapp/components/browser-picker.js
+++ b/webapp/components/browser-picker.js
@@ -16,7 +16,7 @@ class BrowserPicker extends ProductInfo(PolymerElement) {
   static get template() {
     return html`
   <paper-dropdown-menu label="Browser" no-animations>
-    <paper-listbox slot="dropdown-content" selected="{{ browser }}" attr-for-selected="value">
+    <paper-listbox slot="dropdown-content" selected="[[browser]]" attr-for-selected="value" on-change="selectedChanged">
       <template is="dom-repeat" items="[[products]]" as="product">
         <paper-icon-item value="[[product.browser_name]]">
           <display-logo slot="item-icon" product="[[product]]" small></display-logo>
@@ -33,7 +33,6 @@ class BrowserPicker extends ProductInfo(PolymerElement) {
       browser: {
         type: String,
         value: DefaultBrowserNames[0],
-        notify: true,
       },
       products: {
         type: Array,
@@ -41,6 +40,12 @@ class BrowserPicker extends ProductInfo(PolymerElement) {
       },
     };
   }
+
+  selectedChanged(e) {
+    this.dispatchEvent(new CustomEvent('browser-name-changed', {
+      detail: { value: e.target.value }
+    }));
+  }
 }
 window.customElements.define(BrowserPicker.is, BrowserPicker);
 export { BrowserPicker };
@@ -84,7 +89,6 @@ class BrowserMultiPicker extends ProductInfo(PolymerElement) {
       browser: {
         type: String,
         value: DefaultBrowserNames[0],
-        notify: true,
       },
       products: {
         type: Array,
@@ -93,7 +97,6 @@ class BrowserMultiPicker extends ProductInfo(PolymerElement) {
       },
       selected: {
         type: Array,
-        notify: true,
         value: DefaultProducts.map(p => p.browser_name),
       }
     };