Ensures App Router Link respects scroll-behavior: smooth when only ha…

…sh is changed. (#54243)

Fixes #54240

The Link component in App Router is not respecting `scroll-behavior: smooth` when only the hash changes.

It appears to be caused by `focusAndScrollRef.onlyHashChange = false` being set before `handleSmoothScroll` is called, causing `htmlElement.style.scrollBehavior` to be overridden to `auto` before `scrollIntoView` is called.

Moving `focusAndScrollRef.onlyHashChange = false` to after `handleSmoothScroll` invocation resolves the issue.

packages/next/src/client/components/layout-router.tsx

@@ -222,7 +222,6 @@ class InnerScrollAndFocusHandler extends React.Component<ScrollAndFocusHandlerPr
 
       // State is mutated to ensure that the focus and scroll is applied only once.
       focusAndScrollRef.apply = false
-      focusAndScrollRef.onlyHashChange = false
       focusAndScrollRef.hashFragment = null
       focusAndScrollRef.segmentPaths = []
 
@@ -263,6 +262,9 @@ class InnerScrollAndFocusHandler extends React.Component<ScrollAndFocusHandlerPr
         }
       )
 
+      // Mutate after scrolling so that it can be read by `handleSmoothScroll`
+      focusAndScrollRef.onlyHashChange = false
+
       // Set focus on the element
       domNode.focus()
     }