Add hidden key trap field to prevent user from tabbing out of sidebar

(closes #4159)

css/80_app.css

@@ -1966,6 +1966,14 @@ img.wiki-image {
     background: rgba(0,0,0,.8);
 }
 
+/* hidden field to prevent user from tabbing out of the sidebar */
+input.key-trap {
+    height: 0px;
+    width: 0px;
+    padding: 0px;
+    border: 1px solid rgba(0,0,0,0);
+}
+
 /* Fullscreen button */
 div.full-screen {
     float: right;

modules/ui/entity_editor.js

@@ -102,6 +102,12 @@ export function uiEntityEditor(context) {
             .append('div')
             .attr('class', 'raw-membership-editor inspector-inner');
 
+        enter
+            .append('input')
+            .attr('type', 'text')
+            .attr('class', 'key-trap');
+
+
         // Update
         body = body
             .merge(enter);
@@ -151,6 +157,15 @@ export function uiEntityEditor(context) {
             .call(uiRawMembershipEditor(context)
                 .entityID(id));
 
+        body.select('.key-trap')
+            .on('keydown.key-trap', function() {
+                // On tabbing, send focus back to the first field on the inspector-body
+                // (probably the `name` field) #4159
+                if (d3.event.keyCode === 9 && !d3.event.shiftKey) {
+                    d3.event.preventDefault();
+                    body.select('input').node().focus();
+                }
+            });
 
         context.history()
             .on('change.entity-editor', historyChanged);