diff --git a/src/sections/edit-collection-featured-items/featured-items-form/FeaturedItemsForm.tsx b/src/sections/edit-collection-featured-items/featured-items-form/FeaturedItemsForm.tsx index 909646980..bfe720358 100644 --- a/src/sections/edit-collection-featured-items/featured-items-form/FeaturedItemsForm.tsx +++ b/src/sections/edit-collection-featured-items/featured-items-form/FeaturedItemsForm.tsx @@ -60,10 +60,20 @@ export const FeaturedItemsForm = ({ index + 1, { content: '', image: null }, { - shouldFocus: true, - focusName: `featuredItems.${index + 1}.content` + shouldFocus: false } ) + + // These two timeouts are necessary to ensure the new field is focused and scrolled into view + setTimeout(() => { + const newFieldEditor = document.getElementById(`featuredItems.${index + 1}.editorContent`) + newFieldEditor?.focus() + }, 0) + + setTimeout(() => { + const newField = document.querySelector(`[data-featured-item="featured-item-${index + 1}"]`) + newField?.scrollIntoView({ behavior: 'smooth', block: 'center' }) + }, 100) } const handleOnRemoveField = (index: number) => remove(index) diff --git a/src/sections/edit-collection-featured-items/featured-items-form/featured-item-field/ContentField.tsx b/src/sections/edit-collection-featured-items/featured-items-form/featured-item-field/ContentField.tsx index fcb8f245d..12d27d76c 100644 --- a/src/sections/edit-collection-featured-items/featured-items-form/featured-item-field/ContentField.tsx +++ b/src/sections/edit-collection-featured-items/featured-items-form/featured-item-field/ContentField.tsx @@ -52,6 +52,7 @@ const ContentField = ({ itemIndex }: ContentFieldProps) => { invalid={invalid} ariaRequired ref={ref} + editorContentId={`featuredItems.${itemIndex}.editorContent`} /> {invalid &&
{error?.message}
} diff --git a/src/sections/edit-collection-featured-items/featured-items-form/featured-item-field/FeaturedItemField.tsx b/src/sections/edit-collection-featured-items/featured-items-form/featured-item-field/FeaturedItemField.tsx index 3bc853930..8a3a2ef64 100644 --- a/src/sections/edit-collection-featured-items/featured-items-form/featured-item-field/FeaturedItemField.tsx +++ b/src/sections/edit-collection-featured-items/featured-items-form/featured-item-field/FeaturedItemField.tsx @@ -50,6 +50,7 @@ export const FeaturedItemField = ({ return (