From ae06e28f9ba7068efcfe082376f7ba7fa1fbcf51 Mon Sep 17 00:00:00 2001
From: Bryan Housel <bryan@mapbox.com>
Date: Fri, 19 Apr 2019 10:02:25 -0400
Subject: [PATCH] Try to avoid style recalculation when typing on the comment
 box

I think this doesn't completely work.. It reduces the amount
of unnecessary DOM changes, but there are still some more.
---
 modules/ui/commit.js      | 11 +++++++++--
 modules/ui/form_fields.js | 30 ++++++++++++++++++------------
 2 files changed, 27 insertions(+), 14 deletions(-)

diff --git a/modules/ui/commit.js b/modules/ui/commit.js
index 5857d65867..0c5dc92db0 100644
--- a/modules/ui/commit.js
+++ b/modules/ui/commit.js
@@ -200,19 +200,26 @@ export function uiCommit(context) {
         var prose = saveSection.selectAll('.commit-info')
             .data([0]);
 
+        if (prose.enter().size()) {   // first time, make sure to update user details in prose
+            _userDetails = null;
+        }
+
         prose = prose.enter()
             .append('p')
             .attr('class', 'commit-info')
             .text(t('commit.upload_explanation'))
             .merge(prose);
 
+        // always check if this has changed, but only update prose.html()
+        // if needed, because it can trigger a style recalculation
         osm.userDetails(function(err, user) {
             if (err) return;
 
-            var userLink = d3_select(document.createElement('div'));
-
+            if (_userDetails === user) return;  // no change
             _userDetails = user;
 
+            var userLink = d3_select(document.createElement('div'));
+
             if (user.image_url) {
                 userLink
                     .append('img')
diff --git a/modules/ui/form_fields.js b/modules/ui/form_fields.js
index 1ffc4a59a0..ee2248e944 100644
--- a/modules/ui/form_fields.js
+++ b/modules/ui/form_fields.js
@@ -8,6 +8,7 @@ import { utilGetSetValue, utilNoAuto } from '../util';
 export function uiFormFields(context) {
     var moreCombo = uiCombobox(context, 'more-fields').minItems(1);
     var _fieldsArr = [];
+    var _lastPlaceholder = '';
     var _state = '';
     var _klass = '';
 
@@ -49,17 +50,22 @@ export function uiFormFields(context) {
             });
 
 
-        notShown = notShown.map(function(field) {
+        var titles = [];
+        var moreFields = notShown.map(function(field) {
+            var label = field.label();
+            titles.push(label);
             return {
-                title: field.label(),
-                value: field.label(),
+                title: label,
+                value: label,
                 field: field
             };
         });
 
+        var placeholder = titles.slice(0,3).join(', ') + ((titles.length > 3) ? '…' : '');
+
 
         var more = selection.selectAll('.more-fields')
-            .data((_state === 'hover' || notShown.length === 0) ? [] : [0]);
+            .data((_state === 'hover' || moreFields.length === 0) ? [] : [0]);
 
         more.exit()
             .remove();
@@ -82,20 +88,14 @@ export function uiFormFields(context) {
             .append('input')
             .attr('class', 'value')
             .attr('type', 'text')
+            .attr('placeholder', placeholder)
             .call(utilNoAuto)
             .merge(input);
 
         input
             .call(utilGetSetValue, '')
-            .attr('placeholder', function() {
-                var placeholder = [];
-                for (var field in notShown) {
-                    placeholder.push(notShown[field].title);
-                }
-                return placeholder.slice(0,3).join(', ') + ((placeholder.length > 3) ? '…' : '');
-            })
             .call(moreCombo
-                .data(notShown)
+                .data(moreFields)
                 .on('accept', function (d) {
                     if (!d) return;  // user entered something that was not matched
                     var field = d.field;
@@ -106,6 +106,12 @@ export function uiFormFields(context) {
                     }
                 })
             );
+
+        // avoid updating placeholder excessively (triggers style recalc)
+        if (_lastPlaceholder !== placeholder) {
+            input.attr('placeholder', placeholder);
+            _lastPlaceholder = placeholder;
+        }
     }