I'm trying to use scrollIntoView on a react application, and therefore in a page I am using this
useEffect(() => {
myRef.current.scrollIntoView({ behavior: 'smooth' });
}, [myRef, selectedSectionIndex, modalOpen]);
It works on almost every situation as I have the ref={myRef} associated to the element that I want to put into view. However, in one of the transitions even if the code is called it does nothing (not even throws an error). Only if I change it to
useEffect(() => {
setTimeout(() => myRef.current.scrollIntoView({ behavior: 'smooth' }), 0);
}, [myRef, selectedSectionIndex, modalOpen]);
I have read about similar issues, and that's why I actually tried this solution. But can't really put my finger on how this solves it. I keep reading the referenced dom element might not be rendered yet when the first code runs, but
a. Why would it be on the second one? b. Putting a debugger just above that line I can see the element is present in the DOM and even more if I release the debuger, same and silently does nothing but if I step over and run that line it actually scrolls.Edit: I attach a screenshot of the debugger, if I press f8 nothing, if I press f10 it scrolls
I would like to thin there's a cleaner way of making this work but can't find it
Thanks
