SolidJS•2y ago

Navigate then perform action

This function is an event handler for a bunch of buttons. It's prop(para) is different for each button. It navigates to a different url. Each URL it navigates to loads the same components with different data based on the params, which change each time the button is pressed. When that component loads it sets an array from a provider with 100s of refs. After the new URL has been navigated to and the refs have loaded I would very much like to .scrollIntoView() to that ref. SO I set a timeOut around all of that....to make sure the component has loaded and the refs are all in the provider. Problem: Which ever button I click first, it works. Sometimes the second click works. But more often than not the scrollIntoView stops works after the second or third button click. The navigate always works(it always goes to the new url). No error messages. I am console logging matchingRef and it's always right. Not sure why scrollIntoView stops working eventually. Not sure if there's just a better way to do this 🙂

  const scrollToSelectedSearch = (para) => {
    if (para.bookTitle && para.translatorName) {
      navigate(`/book/${para.bookTitle}/${para.translatorName}`)
    }
    setTimeout(() => {
      const matchingRef = paragraphRefs().find(
        (ref) => ref.id() === para.paragraphId
      )
      matchingRef.ref.scrollIntoView()
    }, 750)
  }

  const scrollToSelectedSearch = (para) => {
    if (para.bookTitle && para.translatorName) {
      navigate(`/book/${para.bookTitle}/${para.translatorName}`)
    }
    setTimeout(() => {
      const matchingRef = paragraphRefs().find(
        (ref) => ref.id() === para.paragraphId
      )
      matchingRef.ref.scrollIntoView()
    }, 750)
  }

9 Replies

GrahfOP•2y ago

Also, the scrollIntoView ALWAYS works when the if block(with the navigate) is skipped

REEEEE•2y ago

How are the paragraphRefs registered

GrahfOP•2y ago

Just stepped out I will get back to you as soon as possible sorry

REEEEE•2y ago

No problem, take your time

GrahfOP•2y ago

I'm setting the refs like this: <p ref={(el) => { setBookRefs((p) => [...p, el]) setParagraphRefs((p) => [ ...p, { ref: el, id: () => props.paragraphId }, ]) createEffect(() => { setParagraphRefs((p) => p.filter((i) => i.ref.getAttribute('data-book') === params.title) ) }) }}

REEEEE•2y ago

Why not do the check for the matchingRef here then and just scrollIntoView itself

GrahfOP•2y ago

I've been meditiating on that. I'm assuming I'd use a provider to pass the matchingRef between the components. Don't think I could use location.state discussed here https://start.solidjs.com/api/useNavigate

REEEEE•2y ago

Yeah, most likely would have to use context if they're in separate components Not sure if it would work, but you could try using the useIsRouting function to check if the navigation has finished and then handle the scroll into view https://github.com/solidjs/solid-router/tree/main#useisrouting

GrahfOP•2y ago

on it I woke up with the sudden realization of what I was doing. I was making two of each ref because the component that made the refs was being called twice. Removed the duplicate refs(which will give me additional problems to sort through). Not sure why the scrollIntoView would work for a while and then stop with duplicate refs but since removing the second call to the component that makes the refs scrollIntoView always works. add a prop called makeRefs={true} ftw

Gaming

Programming

Navigate then perform action