Focus name field on API name already exists error (#2366)

* focus name field on API name already exists error

* test passes with fix, fails without it

app/components/form/SideModalForm.tsx

@@ -56,7 +56,7 @@ type SideModalFormProps<TFieldValues extends FieldValues> = {
  * slightly awkward but it also makes some sense. I do not believe there is
  * any way to distinguish between fresh pageload and back/forward.
  */
-export function useShouldAnimateModal() {
+function useShouldAnimateModal() {
   return useNavigationType() === NavigationType.Push
 }
 
@@ -80,7 +80,7 @@ export function SideModalForm<TFieldValues extends FieldValues>({
   useEffect(() => {
     if (submitError?.errorCode === 'ObjectAlreadyExists' && 'name' in form.getValues()) {
       // @ts-expect-error
-      form.setError('name', { message: 'Name already exists' })
+      form.setError('name', { message: 'Name already exists' }, { shouldFocus: true })
     }
   }, [submitError, form])
 

app/ui/lib/SideModal.tsx

@@ -161,6 +161,7 @@ function SideModalBody({ children }: { children?: ReactNode }) {
         'body relative h-full overflow-y-auto pb-12 pt-8',
         !scrollStart && 'border-t border-t-secondary'
       )}
+      data-testid="sidemodal-scroll-container"
     >
       {children}
     </div>

test/e2e/silos.e2e.ts

@@ -261,3 +261,25 @@ test('Silo IP pools link pool', async ({ page }) => {
   await expect(modal).toBeHidden()
   await expectRowVisible(table, { name: 'ip-pool-3', Default: '' })
 })
+
+// just a convenient form to test this with because it's tall
+test('form scrolls to name field on already exists error', async ({ page }) => {
+  await page.setViewportSize({ width: 800, height: 400 })
+  await page.goto('/system/silos-new')
+
+  const nameField = page.getByRole('textbox', { name: 'Name', exact: true })
+  await expect(nameField).toBeInViewport()
+
+  await nameField.fill('maze-war')
+
+  // scroll all the way down so the name field is not visible
+  await page
+    .getByTestId('sidemodal-scroll-container')
+    .evaluate((el: HTMLElement, to) => el.scrollTo(0, to), 800)
+  await expect(nameField).not.toBeInViewport()
+
+  await page.getByRole('button', { name: 'Create silo' }).click()
+
+  await expect(nameField).toBeInViewport()
+  await expect(page.getByText('name already exists').nth(0)).toBeVisible()
+})