fix(tasks): autofocus first input in task form (#1173)

* fix(tasks): autofocus first input in task form

* fix(tasks): use looser autofocus selector

Author: alexkrolick

src/elements/content-sidebar/AddTaskButton.js

@@ -63,12 +63,16 @@ class AddTaskButton extends React.Component<Props, State> {
         const { isDisabled, feedbackUrl, ...passThrough } = this.props;
         const { isTaskFormOpen, taskType, error } = this.state;
 
+        // CSS selector for first form element
+        // Note: Modal throws an error if this fails to find an element!
+        const focusTargetSelector = '.task-modal input';
         return (
             <React.Fragment>
                 <AddTaskMenu isDisabled={isDisabled} onMenuItemClick={this.handleClickMenuItem} />
                 <Modal
                     className="be-modal task-modal"
                     data-testid="create-task-modal"
+                    focusElementSelector={focusTargetSelector}
                     isOpen={isTaskFormOpen}
                     onRequestClose={this.handleModalClose}
                     title={

test/integration/content-sidebar/TaskForm.e2e.test.js

@@ -24,6 +24,14 @@ describe('Create Task', () => {
         });
     });
 
+    context('Task Modal', () => {
+        it('autofocuses first input (assignees)', () => {
+            cy.contains(l('be.tasks.addTask')).click();
+            cy.contains(l('be.tasks.addTask.approval')).click();
+            cy.focused().should('have.attr', 'data-testid', 'task-form-assignee-input');
+        });
+    });
+
     context('Task Form', () => {
         beforeEach(() => {
             cy.server();