Fix inputs clearing on blur with react apps

Gulpfile.js

@@ -1,5 +1,5 @@
 var gulp = require('gulp'),
-  sass = require('gulp-sass'),
+  sass = require('gulp-sass')(require('sass')),
   connect = require('gulp-connect'),
   uglify = require('gulp-uglifyes'),
   cleanCSS = require('gulp-clean-css'),
@@ -10,15 +10,15 @@ var gulp = require('gulp'),
   browserify = require('browserify');
 
 gulp.task('sass', function() {
-  gulp
+  return gulp
     .src('./source/app/*.scss')
     .pipe(sass())
     .pipe(gulp.dest('./extension/dist/'))
     .pipe(connect.reload());
 });
 
 gulp.task('production-sass', function() {
-  gulp
+  return gulp
     .src('./source/app/*.scss')
     .pipe(sass())
     .pipe(cleanCSS())
@@ -111,6 +111,6 @@ gulp.task('watch', () => {
   gulp.watch('./source/app/**/*.js', ['dev-app']);
 });
 
-gulp.task('default', ['production-app', 'production-bg', 'sass']);
-gulp.task('serve', ['dev-bg', 'dev-app', 'sass', 'connect', 'watch']);
-gulp.task('production', ['production-app', 'production-bg', 'production-sass']);
+gulp.task('default', gulp.series('production-app', 'production-bg', 'sass'));
+gulp.task('serve', gulp.series('dev-bg', 'dev-app', 'sass', 'connect', 'watch'));
+gulp.task('production', gulp.series('production-app', 'production-bg', 'production-sass'));

extension/js/content_script.js

@@ -5,6 +5,27 @@ let visibleDialog = false,
   getInputs = () => {
     return document.getElementsByTagName('input');
   },
+  internalSetValue = (input, value) => {
+    var lastValue = input.value;
+    var value = value;
+
+    input.focus();
+    input.value = value;
+
+    var ev = new Event("change", { bubbles: true });
+    ev.simulated = true;
+
+    var ev2 = new Event("input", { bubbles: true });
+    ev2.simulated = true;
+
+    var tracker = input._valueTracker;
+    if (tracker) {
+        tracker.setValue(lastValue);
+    }
+
+    input.dispatchEvent(ev);
+    input.dispatchEvent(ev2);
+  },
   setInputValues = content => {
     let inputs = getInputs();
     if (inputs.length === 0) {
@@ -19,19 +40,18 @@ let visibleDialog = false,
       } else {
         appendSuccessDialog();
       }
+
       for (let i = 0; i < inputs.length; i++) {
+        if (inputs[i].focus) inputs[i].focus();
         switch (inputs[i].type.toLowerCase()) {
           case 'email':
-            inputs[i].defaultValue = content.username;
-            inputs[i].value = content.username;
+            internalSetValue(inputs[i], content.username);
             break;
           case 'text':
-            inputs[i].defaultValue = content.username;
-            inputs[i].value = content.username;
+            internalSetValue(inputs[i], content.username);
             break;
           case 'password':
-            inputs[i].defaultValue = content.password;
-            inputs[i].value = content.password;
+            internalSetValue(inputs[i], content.password);
             break;
         }
       }

package.json

@@ -19,11 +19,11 @@
     "es6-promise": "^3.0.2",
     "events": "^1.1.0",
     "fbjs": "^0.2.1",
-    "gulp": "3.9.1",
+    "gulp": "^4.0.2",
     "gulp-babel": "^6.1.2",
     "gulp-clean-css": "^2.0.13",
     "gulp-connect": "^2.2.0",
-    "gulp-sass": "^2.0.4",
+    "gulp-sass": "^5.0.0",
     "gulp-sourcemaps": "^1.3.0",
     "gulp-uglifyes": "^0.1.3",
     "ionicons": "^2.0.1",
@@ -33,11 +33,12 @@
     "react-bootstrap": "^0.26.0",
     "react-router": "^0.13.0",
     "react-textarea-autosize": "^2.5.4",
+    "sass": "^1.45.0",
     "tldjs": "^1.6.2",
     "trezor-connect": "8.1.1",
     "validator": "^5.5.0",
-    "vinyl-buffer": "^1.0.0",
-    "vinyl-source-stream": "^1.0.0",
+    "vinyl-buffer": "^1.0.1",
+    "vinyl-source-stream": "^2.0.0",
     "whatwg-fetch": "^0.9.0"
   },
   "bin": {

source/app/styles/bootstrap/_carousel.scss

@@ -243,16 +243,16 @@
     .icon-next {
       width: ($carousel-control-font-size * 1.5);
       height: ($carousel-control-font-size * 1.5);
-      margin-top: ($carousel-control-font-size / -2);
+      margin-top: calc($carousel-control-font-size / -2);
       font-size: ($carousel-control-font-size * 1.5);
     }
     .glyphicon-chevron-left,
     .icon-prev {
-      margin-left: ($carousel-control-font-size / -2);
+      margin-left: calc($carousel-control-font-size / -2);
     }
     .glyphicon-chevron-right,
     .icon-next {
-      margin-right: ($carousel-control-font-size / -2);
+      margin-right: calc($carousel-control-font-size / -2);
     }
   }
 

source/app/styles/bootstrap/_code.scss

@@ -40,8 +40,8 @@ kbd {
 // Blocks of code
 pre {
   display: block;
-  padding: (($line-height-computed - 1) / 2);
-  margin: 0 0 ($line-height-computed / 2);
+  padding: calc(($line-height-computed - 1px) / 2);
+  margin: 0 0 calc($line-height-computed / 2);
   font-size: ($font-size-base - 1); // 14px to 13px
   line-height: $line-height-base;
   word-break: break-all;

source/app/styles/bootstrap/_forms.scss

@@ -591,7 +591,7 @@ input[type="checkbox"] {
   // Reposition the icon because it's now within a grid column and columns have
   // `position: relative;` on them. Also accounts for the grid gutter padding.
   .has-feedback .form-control-feedback {
-    right: floor(($grid-gutter-width / 2));
+    right: floor(calc($grid-gutter-width / 2));
   }
 
   // Form group sizes

source/app/styles/bootstrap/_jumbotron.scss

@@ -16,7 +16,7 @@
   }
 
   p {
-    margin-bottom: ($jumbotron-padding / 2);
+    margin-bottom: calc($jumbotron-padding / 2);
     font-size: $jumbotron-font-size;
     font-weight: 200;
   }
@@ -28,8 +28,8 @@
   .container &,
   .container-fluid & {
     border-radius: $border-radius-large; // Only round corners at higher resolutions if contained in a container
-    padding-left:  ($grid-gutter-width / 2);
-    padding-right: ($grid-gutter-width / 2);
+    padding-left:  calc($grid-gutter-width / 2);
+    padding-right: calc($grid-gutter-width / 2);
   }
 
   .container {

source/app/styles/bootstrap/_navbar.scss

@@ -230,7 +230,7 @@
 // the nav the full height of the horizontal nav (above 768px).
 
 .navbar-nav {
-  margin: ($navbar-padding-vertical / 2) (-$navbar-padding-horizontal);
+  margin: calc($navbar-padding-vertical / 2) (-$navbar-padding-horizontal);
 
   > li > a {
     padding-top:    10px;

source/app/styles/bootstrap/_type.scss

@@ -25,7 +25,7 @@ h1, .h1,
 h2, .h2,
 h3, .h3 {
   margin-top: $line-height-computed;
-  margin-bottom: ($line-height-computed / 2);
+  margin-bottom: calc($line-height-computed / 2);
 
   small,
   .small {
@@ -35,8 +35,8 @@ h3, .h3 {
 h4, .h4,
 h5, .h5,
 h6, .h6 {
-  margin-top: ($line-height-computed / 2);
-  margin-bottom: ($line-height-computed / 2);
+  margin-top: calc($line-height-computed / 2);
+  margin-bottom: calc($line-height-computed / 2);
 
   small,
   .small {
@@ -56,7 +56,7 @@ h6, .h6 { font-size: $font-size-h6; }
 // -------------------------
 
 p {
-  margin: 0 0 ($line-height-computed / 2);
+  margin: 0 0 calc($line-height-computed / 2);
 }
 
 .lead {
@@ -77,7 +77,7 @@ p {
 // Ex: (12px small font / 14px base font) * 100% = about 85%
 small,
 .small {
-  font-size: floor((100% * $font-size-small / $font-size-base));
+  font-size: floor(calc(100% * $font-size-small / $font-size-base));
 }
 
 mark,
@@ -136,7 +136,7 @@ mark,
 // -------------------------
 
 .page-header {
-  padding-bottom: (($line-height-computed / 2) - 1);
+  padding-bottom: (calc($line-height-computed / 2) - 1);
   margin: ($line-height-computed * 2) 0 $line-height-computed;
   border-bottom: 1px solid $page-header-border-color;
 }
@@ -149,7 +149,7 @@ mark,
 ul,
 ol {
   margin-top: 0;
-  margin-bottom: ($line-height-computed / 2);
+  margin-bottom: calc($line-height-computed / 2);
   ul,
   ol {
     margin-bottom: 0;
@@ -239,7 +239,7 @@ abbr[data-original-title] {
 
 // Blockquotes
 blockquote {
-  padding: ($line-height-computed / 2) $line-height-computed;
+  padding: calc($line-height-computed / 2) $line-height-computed;
   margin: 0 0 $line-height-computed;
   font-size: $blockquote-font-size;
   border-left: 5px solid $blockquote-border-color;

source/app/styles/bootstrap/_variables.scss

@@ -365,8 +365,8 @@ $container-lg:                 $container-large-desktop !default;
 $navbar-height:                    50px !default;
 $navbar-margin-bottom:             $line-height-computed !default;
 $navbar-border-radius:             $border-radius-base !default;
-$navbar-padding-horizontal:        floor(($grid-gutter-width / 2)) !default;
-$navbar-padding-vertical:          (($navbar-height - $line-height-computed) / 2) !default;
+$navbar-padding-horizontal:        floor(calc($grid-gutter-width / 2)) !default;
+$navbar-padding-vertical:          calc(($navbar-height - $line-height-computed) / 2) !default;
 $navbar-collapse-max-height:       340px !default;
 
 $navbar-default-color:             #777 !default;

source/app/styles/bootstrap/mixins/_grid-framework.scss

@@ -13,8 +13,8 @@
     // Prevent columns from collapsing when empty
     min-height: 1px;
     // Inner gutter via padding
-    padding-left:  ceil(($grid-gutter-width / 2));
-    padding-right: floor(($grid-gutter-width / 2));
+    padding-left:  ceil(calc($grid-gutter-width / 2));
+    padding-right: floor(calc($grid-gutter-width / 2));
   }
 }
 
@@ -33,12 +33,12 @@
 @mixin calc-grid-column($index, $class, $type) {
   @if ($type == width) and ($index > 0) {
     .col-#{$class}-#{$index} {
-      width: percentage(($index / $grid-columns));
+      width: percentage(calc($index / $grid-columns));
     }
   }
   @if ($type == push) and ($index > 0) {
     .col-#{$class}-push-#{$index} {
-      left: percentage(($index / $grid-columns));
+      left: percentage(calc($index / $grid-columns));
     }
   }
   @if ($type == push) and ($index == 0) {
@@ -48,7 +48,7 @@
   }
   @if ($type == pull) and ($index > 0) {
     .col-#{$class}-pull-#{$index} {
-      right: percentage(($index / $grid-columns));
+      right: percentage(calc($index / $grid-columns));
     }
   }
   @if ($type == pull) and ($index == 0) {
@@ -58,7 +58,7 @@
   }
   @if ($type == offset) {
     .col-#{$class}-offset-#{$index} {
-      margin-left: percentage(($index / $grid-columns));
+      margin-left: percentage(calc($index / $grid-columns));
     }
   }
 }