dynamically add item VS scroll behavior - reactjs

Question

As shown in the minimal example (gif), the scroll-behavior when adding items depends on the current scroll position.
Here is the code for that example:
const [items, setItems] = React.useState([]);
const addItem = i => {
setItems(s => [...s, i]);
};
return (
<div className="App">
<header style={boxStyle}>HEADER</header>
{items.map(item => (
<Item text={item} key={item} />
))}
<button onClick={() => addItem(`item${items.length}`)}>Add</button>
<footer style={boxStyle}>FOOTER</footer>
</div>
);
https://codesandbox.io/s/ancient-feather-lttw5?file=/src/App.js
For the first 2 items the add button moves down. But then the button feels like staying at the same position when new items are added before (effectively the scroll position changes what makes it feel like the item is added "before" rather than "in-place").
In our real world app that UX feels super stange, because each item is a big item-from with 10+ fields and the user would see only the bottom of that form. Instead, we would like the user to see the beginning of the form after clicking the add button (like in the example when adding item0 and item1 where the beginning of the item is shown where the mouse is).
Desired scroll UX
I found out that hiding the add button for a render after adding the item fixes the issue:
const [items, setItems] = React.useState([]);
const addItem = i => {
setHide(true);
setItems(s => [...s, i]);
setTimeout(() => setHide(false), 1);
};
const [hide, setHide] = React.useState(false);
return (
<div className="App">
<header style={boxStyle}>HEADER</header>
{items.map(item => (
<Item text={item} key={item} />
))}
{!hide && (
<button onClick={() => addItem(`item${items.length}`)}>Add</button>
)}
<footer style={boxStyle}>FOOTER</footer>
</div>
);
https://codesandbox.io/s/stupefied-kirch-6s5fs?file=/src/App.js
Question
Is there a (cross-browser (and ie11+)) way to achieve the desired behavior in a more elegant way? Ideally without manipulating the scroll position manually.

Answer 1

I think that your best candidate to do so is the method scrollIntoView(). Maybe when you click your button you can identify your item in the dom and scroll to it whenever the document is scrollable and the first item is out of view. Like:
const handleClick = (item) => {
const firstItem = undefined; //you should find the way to get the first item of your list in the dom
firstItem.scrollIntoView({ block: "start" }); // you can add some options for smoothess and position
addItem(item);
}
UPDATE:
Now that I understand the expected result clear, I still think that scrollIntoView is the solution, but in this case you will need to do it after item adding, you may need the hook useEffect for this, like:
useEffect(()=> {
const myAddButton = document.getElementById('myAddButton'); //get the button element
myButton.scrollIntoView({
block: "end"
});
}, [items])
/* Handle click is not needed anymore
const handleClick = (item) => {
addItem(item);
}*/
You can still tweak this a little bit so you can have a gap between the bottom of the page, but this will make a good start.