From 88ff303a49c0249500c1773dcdc090dbed5d94f5 Mon Sep 17 00:00:00 2001
From: Quincy Morgan <quincy.morgan@icloud.com>
Date: Thu, 5 Dec 2019 13:22:43 -0500
Subject: [PATCH] Fix issue where a new row would not appear last after
 deleting multiple rows from the raw tag editor (close #7087)

---
 modules/ui/raw_tag_editor.js | 44 +++++++++++++++++++++---------------
 1 file changed, 26 insertions(+), 18 deletions(-)

diff --git a/modules/ui/raw_tag_editor.js b/modules/ui/raw_tag_editor.js
index 0242402e5..6b8cf1d12 100644
--- a/modules/ui/raw_tag_editor.js
+++ b/modules/ui/raw_tag_editor.js
@@ -20,7 +20,8 @@ export function uiRawTagEditor(context) {
 
     var _tagView = (context.storage('raw-tag-editor-view') || 'list');   // 'list, 'text'
     var _readOnlyTags = [];
-    var _indexedKeys = [];
+    // the keys in the order we want them to display
+    var _orderedKeys = [];
     var _showBlank = false;
     var _updatePreference = true;
     var _expanded = false;
@@ -58,27 +59,31 @@ export function uiRawTagEditor(context) {
 
 
     function content(wrap) {
+
+        // remove deleted keys
+        _orderedKeys = _orderedKeys.filter(function(key) {
+            return _tags[key] !== undefined;
+        });
+
         // When switching to a different entity or changing the state (hover/select)
         // reorder the keys alphabetically.
-        // We trigger this by emptying the `_indexedKeys` array, then it will be rebuilt here.
+        // We trigger this by emptying the `_orderedKeys` array, then it will be rebuilt here.
         // Otherwise leave their order alone - #5857, #5927
         var all = Object.keys(_tags).sort();
-        var known = _indexedKeys.map(function(t) { return t.key; });
-        var missing = utilArrayDifference(all, known);
-        for (var i = 0; i < missing.length; i++) {
-            _indexedKeys.push({ index: _indexedKeys.length, key: missing[i] });
+        var missingKeys = utilArrayDifference(all, _orderedKeys);
+        for (var i in missingKeys) {
+            _orderedKeys.push(missingKeys[i]);
         }
 
-        // assemble row data, excluding any deleted tags
-        var rowData = _indexedKeys.map(function(row) {
-            var v = _tags[row.key];
-            return (v === undefined) ? null : Object.assign(row, { value: v });
-        }).filter(Boolean);
+        // assemble row data
+        var rowData = _orderedKeys.map(function(key, i) {
+            return { index: i, key: key, value: _tags[key] };
+        });
 
         // append blank row last, if necessary
-        if (!_indexedKeys.length || _showBlank) {
+        if (!rowData.length || _showBlank) {
             _showBlank = false;
-            rowData.push({ index: _indexedKeys.length, key: '', value: '' });
+            rowData.push({ index: rowData.length, key: '', value: '' });
         }
 
 
@@ -471,6 +476,10 @@ export function uiRawTagEditor(context) {
 
             _pendingChange[kNew] = vNew;
 
+            // update the ordered key index so this row doesn't change position
+            var existingKeyIndex = _orderedKeys.indexOf(kOld);
+            if (existingKeyIndex !== -1) _orderedKeys[existingKeyIndex] = kNew;
+
             d.key = kNew;    // update datum to avoid exit/enter on tag update
             d.value = vNew;
 
@@ -501,9 +510,8 @@ export function uiRawTagEditor(context) {
                 content(wrap);
 
             } else {
-                // remove from indexedKeys too, so that if the user puts it back,
-                // it will be sorted to the end and not back to its original position
-                _indexedKeys = _indexedKeys.filter(function(row) { return row.key !== d.key; });
+                // remove the key from the ordered key index
+                _orderedKeys = _orderedKeys.filter(function(key) { return key !== d.key; });
 
                 _pendingChange  = _pendingChange || {};
                 _pendingChange[d.key] = undefined;
@@ -537,7 +545,7 @@ export function uiRawTagEditor(context) {
     rawTagEditor.state = function(val) {
         if (!arguments.length) return _state;
         if (_state !== val) {
-            _indexedKeys = [];
+            _orderedKeys = [];
             _state = val;
         }
         return rawTagEditor;
@@ -568,7 +576,7 @@ export function uiRawTagEditor(context) {
     rawTagEditor.entityID = function(val) {
         if (!arguments.length) return _entityID;
         if (_entityID !== val) {
-            _indexedKeys = [];
+            _orderedKeys = [];
             _entityID = val;
         }
         return rawTagEditor;