Merge pull request #18705 from UziTech/autoFocus-element

Enable autoFocus option to accept an element to focus on pane creation

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()

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) {

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)