onPageTransitionEnd doesn't fire on backwards navigation

[Silvenga]

Description

We noticed that onPageTransitionEnd isn't called with backwards navigation if HTML pushState was used (e.g. if say, page state is saved in the querystring/hash), but onPageTransitionStart is still called.

I'm not sure the expected behavior here, but ideally, onPageTransitionEnd is always called if onPageTransitionStart is called.

[brillout]

if HTML pushState was used (e.g. if say, page state is saved in the querystring/hash)

Can you elaborate on that? Or minimal reproduction welcome.

ideally, onPageTransitionEnd is always called if onPageTransitionStart is called.

Agreed.

[Silvenga]

Basically we have a useQueryParams hook that sets the query string (in our case, tab state).

  const setValue = useCallback(
    (newValue: T) => {
      const newUrl = new URL(window.location.href)
      newUrl.searchParams.set(key, typeof newValue === "number" ? newValue.toString() : newValue)
      setInnerValue(newValue)
      window.history.pushState({}, "", newUrl.toString())
    },
    [key],
  )

When users navigate backwards that involves a tab change, the onPageTransitionStart starts (which triggers our transition animation). The onPageTransitionEnd is supposed to remove the CSS classes that cause the animations - but from our debugging, onPageTransitionEnd never triggers. Our fix currently was to disable adding the animation on backwards navigation.

We are in crunch time, so a minimal reproduction might take a bit.

[brillout]

Hm, yea, a minimal reproduction would be best. No rush. Let's re-open then.