diff --git a/css/80_app.css b/css/80_app.css index a4a6b652e..56f2c501a 100644 --- a/css/80_app.css +++ b/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; diff --git a/modules/ui/entity_editor.js b/modules/ui/entity_editor.js index f9abfd139..4f2e0e2fc 100644 --- a/modules/ui/entity_editor.js +++ b/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);