diff --git a/spec/panel-container-element-spec.js b/spec/panel-container-element-spec.js index 039061ae8..1f082fbdd 100644 --- a/spec/panel-container-element-spec.js +++ b/spec/panel-container-element-spec.js @@ -198,11 +198,11 @@ describe('PanelContainerElement', () => { }) describe('autoFocus', () => { - function createPanel () { + function createPanel (autoFocus = true) { const panel = new Panel( { item: new TestPanelContainerItem(), - autoFocus: true, + autoFocus: autoFocus, visible: false }, atom.views @@ -224,6 +224,20 @@ describe('PanelContainerElement', () => { expect(document.activeElement).toBe(inputEl) }) + it('focuses the autoFocus element if available', () => { + const inputEl1 = document.createElement('input') + const inputEl2 = document.createElement('input') + const panel = createPanel(inputEl2) + const panelEl = panel.getElement() + + panelEl.appendChild(inputEl1) + panelEl.appendChild(inputEl2) + expect(document.activeElement).not.toBe(inputEl2) + + panel.show() + expect(document.activeElement).toBe(inputEl2) + }) + it('focuses the entire panel item when no tabbable item is available and the panel is focusable', () => { const panel = createPanel() const panelEl = panel.getElement() diff --git a/src/panel-container-element.js b/src/panel-container-element.js index 5334b61b4..a3dc9f62b 100644 --- a/src/panel-container-element.js +++ b/src/panel-container-element.js @@ -55,7 +55,7 @@ class PanelContainerElement extends HTMLElement { })) if (panel.autoFocus) { - const modalFocusTrap = focusTrap(panelElement, { + const focusOptions = { // focus-trap will attempt to give focus to the first tabbable element // on activation. If there aren't any tabbable elements, // give focus to the panel element itself @@ -63,7 +63,12 @@ class PanelContainerElement extends HTMLElement { // closing is handled by core Atom commands and this already deactivates // on visibility changes escapeDeactivates: false - }) + } + + if (panel.autoFocus !== true) { + focusOptions.initialFocus = panel.autoFocus + } + const modalFocusTrap = focusTrap(panelElement, focusOptions) this.subscriptions.add(panel.onDidChangeVisible(visible => { if (visible) { diff --git a/src/workspace.js b/src/workspace.js index 141ef5181..0b3b4a3e8 100644 --- a/src/workspace.js +++ b/src/workspace.js @@ -1785,8 +1785,8 @@ module.exports = class Workspace extends Model { // (default: true) // * `priority` (optional) {Number} Determines stacking order. Lower priority items are // forced closer to the edges of the window. (default: 100) - // * `autoFocus` (optional) {Boolean} true if you want modal focus managed for you by Atom. - // Atom will automatically focus your modal panel's first tabbable element when the modal + // * `autoFocus` (optional) {Boolean|Element} true if you want modal focus managed for you by Atom. + // Atom will automatically focus on this element or your modal panel's first tabbable element when the modal // opens and will restore the previously selected element when the modal closes. Atom will // also automatically restrict user tab focus within your modal while it is open. // (default: false)