From c4fcb23a306b04de350eb100309623f4b4703d63 Mon Sep 17 00:00:00 2001
From: Quincy Morgan <2046746+quincylvania@users.noreply.github.com>
Date: Fri, 11 Sep 2020 14:30:42 -0400
Subject: [PATCH] Fix issue where tab-focusing off the preset list would
 unexpectedly navigate to the entity editor (re: #7770) Make offscreen
 inspector panes display:hidden

---
 modules/ui/inspector.js | 36 +++++++++++++++++++++++++++---------
 1 file changed, 27 insertions(+), 9 deletions(-)

diff --git a/modules/ui/inspector.js b/modules/ui/inspector.js
index 2dc6825f8..65263f909 100644
--- a/modules/ui/inspector.js
+++ b/modules/ui/inspector.js
@@ -23,9 +23,7 @@ export function uiInspector(context) {
             .autofocus(_newFeature)
             .on('choose', inspector.setPreset)
             .on('cancel', function() {
-                wrap.transition()
-                    .styleTween('right', function() { return d3_interpolate('-100%', '0%'); });
-                editorPane.call(entityEditor);
+                inspector.setPreset();
             });
 
         entityEditor
@@ -87,10 +85,14 @@ export function uiInspector(context) {
 
         if (shouldDefaultToPresetList()) {
             wrap.style('right', '-100%');
-            presetPane.call(presetList);
+            editorPane.classed('hide', true);
+            presetPane.classed('hide', false)
+                .call(presetList);
         } else {
             wrap.style('right', '0%');
-            editorPane.call(entityEditor);
+            presetPane.classed('hide', true);
+            editorPane.classed('hide', false)
+                .call(entityEditor);
         }
 
         var footer = selection.selectAll('.footer')
@@ -109,8 +111,15 @@ export function uiInspector(context) {
 
     inspector.showList = function(presets) {
 
+        presetPane.classed('hide', false);
+
         wrap.transition()
-            .styleTween('right', function() { return d3_interpolate('0%', '-100%'); });
+            .styleTween('right', function() {
+                return d3_interpolate('0%', '-100%');
+            })
+            .on('end', function () {
+                editorPane.classed('hide', true);
+            });
 
         if (presets) {
             presetList.presets(presets);
@@ -123,16 +132,25 @@ export function uiInspector(context) {
     inspector.setPreset = function(preset) {
 
         // upon setting multipolygon, go to the area preset list instead of the editor
-        if (preset.id === 'type/multipolygon') {
+        if (preset && preset.id === 'type/multipolygon') {
             presetPane
                 .call(presetList.autofocus(true));
 
         } else {
+            editorPane.classed('hide', false);
             wrap.transition()
-                .styleTween('right', function() { return d3_interpolate('-100%', '0%'); });
+                .styleTween('right', function() {
+                    return d3_interpolate('-100%', '0%');
+                })
+                .on('end', function () {
+                    presetPane.classed('hide', true);
+                });
 
+            if (preset) {
+                entityEditor.presets([preset])
+            }
             editorPane
-                .call(entityEditor.presets([preset]));
+                .call(entityEditor);
         }
 
     };