Autofocus PeopleSelects in the sidebar

web/app/components/custom-editable-field.hbs

@@ -55,6 +55,7 @@
     </:default>
     <:editing as |F|>
       <Inputs::PeopleSelect
+        {{autofocus targetChildren=true}}
         class="multiselect--narrow"
         @selected={{this.people}}
         @onChange={{this.updateEmails}}

web/app/components/document/sidebar.hbs

@@ -234,6 +234,7 @@
           </:default>
           <:editing as |F|>
             <Inputs::PeopleSelect
+              {{autofocus targetChildren=true}}
               data-test-document-contributors-editable
               class="multiselect--narrow"
               @selected={{this.contributors}}
@@ -273,6 +274,7 @@
           </:default>
           <:editing as |F|>
             <Inputs::PeopleSelect
+              {{autofocus targetChildren=true}}
               data-test-document-approvers-editable
               class="multiselect--narrow"
               @selected={{this.approvers}}

web/app/components/inputs/people-select.ts

@@ -17,6 +17,8 @@ interface InputsPeopleSelectComponentSignature {
   Args: {
     selected: HermesUser[];
     onChange: (people: HermesUser[]) => void;
+    renderInPlace?: boolean;
+    disabled?: boolean;
   };
 }
 

web/app/modifiers/autofocus.ts

@@ -0,0 +1,55 @@
+import { assert } from "@ember/debug";
+import { action } from "@ember/object";
+import { tracked } from "@glimmer/tracking";
+import Modifier from "ember-modifier";
+import { FOCUSABLE } from "hermes/components/editable-field";
+
+interface AutofocusModifierSignature {
+  Args: {
+    Element: Element;
+    Positional: [];
+    Named: {
+      targetChildren?: boolean;
+    };
+  };
+}
+
+export default class AutofocusModifier extends Modifier<AutofocusModifierSignature> {
+  @tracked private _element: Element | null = null;
+  @tracked private targetChildren = false;
+
+  private get element(): Element {
+    assert("element must exist", this._element);
+    return this._element;
+  }
+
+  @action private maybeAutofocus() {
+    if (this.targetChildren) {
+      const target = this.element.querySelector(FOCUSABLE);
+      if (target instanceof HTMLElement) {
+        target.focus();
+      }
+    } else {
+      if (this.element instanceof HTMLElement) {
+        this.element.focus();
+      }
+    }
+  }
+
+  modify(
+    element: Element,
+    _positional: [],
+    named: AutofocusModifierSignature["Args"]["Named"]
+  ) {
+    this._element = element;
+    this.targetChildren = named.targetChildren ?? false;
+
+    this.maybeAutofocus();
+  }
+}
+
+declare module "@glint/environment-ember-loose/registry" {
+  export default interface Registry {
+    autofocus: typeof AutofocusModifier;
+  }
+}

web/tests/acceptance/authenticated/document-test.ts

@@ -524,4 +524,38 @@ module("Acceptance | authenticated/document", function (hooks) {
 
     assert.dom(SUMMARY_SELECTOR).hasText("Enter a summary");
   });
+
+  test('"people" inputs receive focus on click', async function (this: AuthenticatedDocumentRouteTestContext, assert) {
+    this.server.create("document", {
+      objectID: 1,
+      title: "Test Document",
+      isDraft: true,
+      customEditableFields: {
+        Stakeholders: {
+          displayName: "Stakeholders",
+          type: "PEOPLE",
+        },
+      },
+    });
+
+    await visit("/document/1?draft=true");
+
+    await click(`${CONTRIBUTORS_SELECTOR} .field-toggle`);
+
+    assert.true(
+      document.activeElement === find(`${CONTRIBUTORS_SELECTOR} input`)
+    );
+
+    await click(`${APPROVERS_SELECTOR} .field-toggle`);
+
+    assert.true(document.activeElement === find(`${APPROVERS_SELECTOR} input`));
+
+    const stakeholdersSelector = "[data-test-custom-people-field]";
+
+    await click(`${stakeholdersSelector} .field-toggle`);
+
+    assert.true(
+      document.activeElement === find(`${stakeholdersSelector} input`)
+    );
+  });
 });

web/tests/integration/modifiers/autofocus-test.ts

@@ -0,0 +1,44 @@
+import { TestContext, find, render } from "@ember/test-helpers";
+import { module, test } from "qunit";
+import { hbs } from "ember-cli-htmlbars";
+import { setupRenderingTest } from "ember-qunit";
+
+interface AutofocusModifierTestContext extends TestContext {
+  buttonIsShown: boolean;
+}
+module("Integration | Modifier | autofocus", function (hooks) {
+  setupRenderingTest(hooks);
+
+  test("it autofocuses a focusable element", async function (this: AutofocusModifierTestContext, assert) {
+    this.set("buttonIsShown", false);
+
+    await render<AutofocusModifierTestContext>(hbs`
+      <input {{autofocus}} />
+
+      {{#if this.buttonIsShown}}
+        <button {{autofocus}}>Button</button>
+      {{/if}}
+    `);
+
+    assert.true(find("input") === document.activeElement);
+
+    this.set("buttonIsShown", true);
+
+    assert.true(find("button") === document.activeElement);
+  });
+
+  test("it can target focusable children of an element", async function (this: AutofocusModifierTestContext, assert) {
+    await render<AutofocusModifierTestContext>(hbs`
+      <div {{autofocus targetChildren=true}}>
+        <span/>
+        <input />
+        <button />
+      </div>
+    `);
+
+    assert.true(
+      find("input") === document.activeElement,
+      "the first focusable child is focused"
+    );
+  });
+});