Skip to content

Commit

Permalink
feat: improve scroll into view of just added item
Browse files Browse the repository at this point in the history
  • Loading branch information
g-saracca committed Feb 4, 2025
1 parent c8d0505 commit 10db4c9
Show file tree
Hide file tree
Showing 3 changed files with 14 additions and 2 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -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)
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -52,6 +52,7 @@ const ContentField = ({ itemIndex }: ContentFieldProps) => {
invalid={invalid}
ariaRequired
ref={ref}
editorContentId={`featuredItems.${itemIndex}.editorContent`}
/>

{invalid && <div className={styles['error-msg']}>{error?.message}</div>}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -50,6 +50,7 @@ export const FeaturedItemField = ({
return (
<div
id={id}
data-featured-item={`featured-item-${itemIndex}`}
ref={setNodeRef}
style={style}
data-testid={`featured-item-${itemIndex.toString()}`}
Expand Down

0 comments on commit 10db4c9

Please sign in to comment.