Fix batch tally entry auto-focus bug when there are multiple contests (…

…#1895)
votingworks · Mar 6, 2024 · 4913d5d · 4913d5d
1 parent f09f169
commit 4913d5d
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 3 deletions.
diff --git a/client/src/components/JurisdictionAdmin/BatchRoundSteps/BatchRoundTallyEntry/BatchDetail.tsx b/client/src/components/JurisdictionAdmin/BatchRoundSteps/BatchRoundTallyEntry/BatchDetail.tsx
@@ -507,7 +507,7 @@ const BatchResultTallySheet: React.FC<IBatchResultTallySheetProps> = ({
         aria-labelledby={`${Classes.TAB_PANEL}_${batch.name}_${selectedTabId}`}
         role="tabpanel"
       >
-        {contests.map(contest => (
+        {contests.map((contest, contestIndex) => (
           <BatchResultTallySheetTable key={contest.id}>
             <thead>
               <tr>
@@ -521,7 +521,7 @@ const BatchResultTallySheet: React.FC<IBatchResultTallySheetProps> = ({
               </tr>
             </thead>
             <tbody>
-              {contest.choices.map((choice, i) => (
+              {contest.choices.map((choice, choiceIndex) => (
                 <tr key={choice.id}>
                   <td>{choice.name}</td>
                   <td>
@@ -540,7 +540,11 @@ const BatchResultTallySheet: React.FC<IBatchResultTallySheetProps> = ({
                         // since we're auto-focusing after a relevant user action and the input is
                         // clearly labeled
                         // eslint-disable-next-line jsx-a11y/no-autofocus
-                        autoFocus={!isSelectedSheetNewAndUnsaved && i === 0}
+                        autoFocus={
+                          !isSelectedSheetNewAndUnsaved &&
+                          contestIndex === 0 &&
+                          choiceIndex === 0
+                        }
                         className={classnames(
                           Classes.INPUT,
                           errors.results?.[choice.id] && Classes.INTENT_DANGER

diff --git a/...ents/JurisdictionAdmin/BatchRoundSteps/BatchRoundTallyEntry/BatchRoundTallyEntry.test.tsx b/...ents/JurisdictionAdmin/BatchRoundSteps/BatchRoundTallyEntry/BatchRoundTallyEntry.test.tsx
@@ -136,6 +136,7 @@ describe('Batch comparison data entry', () => {
       let row2 = within(rows[3]).getAllByRole('cell')
       const choice1VotesInput = within(row1[1]).getByRole('spinbutton')
       let choice2VotesInput = within(row2[1]).getByRole('spinbutton')
+      expect(choice1VotesInput).toHaveFocus()
       userEvent.type(choice1VotesInput, '1')
       userEvent.clear(choice2VotesInput)
 
@@ -299,6 +300,7 @@ describe('Batch comparison data entry', () => {
       expect(row2).toHaveLength(2)
       let choice1VotesInput = within(row1[1]).getByRole('spinbutton')
       let choice2VotesInput = within(row2[1]).getByRole('spinbutton')
+      expect(choice1VotesInput).toHaveFocus()
       expect(choice1VotesInput).toHaveTextContent('')
       expect(choice2VotesInput).toHaveTextContent('')
 
@@ -479,6 +481,7 @@ describe('Batch comparison data entry', () => {
       let table1Row2 = within(table1Rows[3]).getAllByRole('cell')
       const choice1VotesInput = within(table1Row1[1]).getByRole('spinbutton')
       const choice2VotesInput = within(table1Row2[1]).getByRole('spinbutton')
+      expect(choice1VotesInput).toHaveFocus()
       userEvent.type(choice1VotesInput, '1')
       userEvent.type(choice2VotesInput, '2')
 
@@ -590,6 +593,7 @@ describe('Batch comparison data entry', () => {
       let choice2VotesInput = within(table1Row2[1]).getByRole('spinbutton')
       let choice3VotesInput = within(table2Row1[1]).getByRole('spinbutton')
       let choice4VotesInput = within(table2Row2[1]).getByRole('spinbutton')
+      expect(choice1VotesInput).toHaveFocus()
       expect(choice1VotesInput).toHaveTextContent('')
       expect(choice2VotesInput).toHaveTextContent('')
       expect(choice3VotesInput).toHaveTextContent('')