this is what I am trying to do
Box that contains NutrientFilterOptions.My attempt is available at https://codesandbox.io/s/modest-edison-wz8qr?file=/src/App.tsx
What happens now?
Note: At this time, the code is only connected using ref for Nutrients.
Any help in educating me how I can achieve my goal is greatly appreciated.
Thank you
I have never seen chakra-ui so please excuse me for not completely solving this problem
I managed to get the desired list to scroll into view with this modification to NutrientFilterOptions.tsx
export const NutrientFilterOptions = () => {
useEffect(() => {
const ele = document.querySelector("#myNutFilter");
if (ele) ele.scrollIntoView();
}, []);
return (
<div id="myNutFilter">
What I am doing is giving the element an id instead of using useRef, although useRef may be ideal in this situation.
I am using useEffect because I want the code to execute after the component renders.
After the component renders I have vanilla js to first check that the element exists (isShown) then I scroll it into view if it does exist.
I would like to add that this does not check how the list was initially shown. You would need a state that keeps track of what opened the options menu, and only scroll if that the source was correct. I would use prop drilling or redux to handle the source of options opening.
hopefully that helps!