Focus newly added link variant option

prismicio · Dec 17, 2024 · 17b6eb7 · 17b6eb7
1 parent fe3329e
commit 17b6eb7
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 2 deletions.
diff --git a/packages/slice-machine/src/legacy/lib/models/common/widgets/Link/components.tsx b/packages/slice-machine/src/legacy/lib/models/common/widgets/Link/components.tsx
@@ -11,6 +11,7 @@ import {
 import { Checkbox, Flex, Label } from "theme-ui";
 
 import { Col } from "@/legacy/components/Flex";
+import { useRef } from "react";
 
 interface CommonCheckboxProps {
   checked?: boolean;
@@ -122,6 +123,8 @@ export function Variants({
 
   const deleteButtonShown = (variants?.length ?? 0) > 2;
 
+  const focusableInputIndex = useRef<number>();
+
   return (
     <Box overflow="hidden" flexDirection="column" border borderRadius={6}>
       <Box
@@ -166,6 +169,11 @@ export function Variants({
                 borderRadius={4}
               >
                 <TextInput
+                  ref={(ref) => {
+                    if (focusableInputIndex.current !== position) return;
+                    focusableInputIndex.current = undefined;
+                    ref?.focus();
+                  }}
                   placeholder="Variant option (e.g. Primary)"
                   value={variant}
                   onValueChange={(newVariant) =>
@@ -194,7 +202,10 @@ export function Variants({
               <Button
                 invisible
                 startIcon="add"
-                onClick={() => onVariantsChange([...(variants ?? []), ""])}
+                onClick={() => {
+                  focusableInputIndex.current = variants?.length;
+                  onVariantsChange([...(variants ?? []), ""]);
+                }}
               >
                 Add option
               </Button>

diff --git a/packages/slice-machine/src/legacy/lib/models/common/widgets/Link/index.ts b/packages/slice-machine/src/legacy/lib/models/common/widgets/Link/index.ts
@@ -79,7 +79,7 @@ export const linkConfigSchema = yup
     allowText: yup.boolean().strict().optional(),
     repeat: yup.boolean().strict().optional(),
     variants: yup
-      .array(yup.string().trim().required("values can't be empty"))
+      .array(yup.string().trim().required("Values can't be empty"))
       .optional(),
   })
   .required()