useEffect for an event listener to scroll the page - works as PWA but not on iOS

I have a simple event listener that automatically scrolls to a <details> element when the element is clicked.

I’m using useEffect(); this works when I test it as a PWA in Chrome, but when I build the app for iOS, the listener randomly fails a lot. I don’t see it fail at all in Windows Chrome.

  const scrollAnswerIntoView = () => {
    const showAnswer = document.getElementById('show-answer');
    if (showAnswer) {
      showAnswer.scrollIntoView();
    }
  };

  useEffect(() => {
    const detailsAnswer = document.querySelector('details#show-answer');
    detailsAnswer?.addEventListener('toggle', scrollAnswerIntoView);
    return () => {
      detailsAnswer?.removeEventListener('toggle', scrollAnswerIntoView);
    };
  }, []);

How can I write such an event listener that works on both desktop and iOS?

I referred to this question, and I tried using useIonViewWillEnter() instead, but I couldn’t get that working on desktop, so I was wondering what’s the “best practice” for adding an event listener in Ionic React.

1 post - 1 participant

Read full topic