[fragment-scroll] Stop focusing the first focusable host descendant

Author: eps1lon

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

@@ -139,12 +139,12 @@ function getHashFragmentDomNode(hashFragment: string) {
     document.getElementsByName(hashFragment)[0]
   )
 }
-interface ScrollAndFocusHandlerProps {
+interface ScrollAndMaybeFocusHandlerProps {
   focusAndScrollRef: FocusAndScrollRef
   children: React.ReactNode
   segmentPath: FlightSegmentPath
 }
-class InnerScrollAndFocusHandlerOld extends React.Component<ScrollAndFocusHandlerProps> {
+class InnerScrollAndFocusHandlerOld extends React.Component<ScrollAndMaybeFocusHandlerProps> {
   handlePotentialScroll = () => {
     // Handle scroll and focus, it's only applied once.
     const { focusAndScrollRef, segmentPath } = this.props
@@ -265,7 +265,11 @@ class InnerScrollAndFocusHandlerOld extends React.Component<ScrollAndFocusHandle
   }
 }
 
-function InnerScrollAndFocusHandlerNew(props: ScrollAndFocusHandlerProps) {
+/**
+ * Fork of InnerScrollAndFocusHandlerOld using Fragment refs for scrolling.
+ * No longer focuses the first host descendant.
+ */
+function InnerScrollHandlerNew(props: ScrollAndMaybeFocusHandlerProps) {
   const childrenRef = React.useRef<FragmentInstance>(null)
 
   useLayoutEffect(
@@ -309,6 +313,18 @@ function InnerScrollAndFocusHandlerNew(props: ScrollAndFocusHandlerProps) {
         focusAndScrollRef.hashFragment = null
         focusAndScrollRef.segmentPaths = []
 
+        const activeElement = document.activeElement
+        if (
+          activeElement !== null &&
+          'blur' in activeElement &&
+          typeof activeElement.blur === 'function'
+        ) {
+          // Matching hard navigations so that the focus cursor is before the new segment
+          // There might be more content before the new segment but that's better
+          // than staying on the link that triggered the navigation.
+          activeElement.blur()
+        }
+
         disableSmoothScrollDuringRouteTransition(
           () => {
             // In case of hash scroll, we only need to scroll the element into view
@@ -348,11 +364,6 @@ function InnerScrollAndFocusHandlerNew(props: ScrollAndFocusHandlerProps) {
 
         // Mutate after scrolling so that it can be read by `disableSmoothScrollDuringRouteTransition`
         focusAndScrollRef.onlyHashChange = false
-
-        // Set focus on the element but don't scroll since we already did that.
-        // The focus might have targetted a deep element outside of the instances
-        // top edge.
-        instance.focus({ preventScroll: true })
       }
     },
     // Used to run on every commit. We may be able to be smarter about this
@@ -363,11 +374,11 @@ function InnerScrollAndFocusHandlerNew(props: ScrollAndFocusHandlerProps) {
   return <Fragment ref={childrenRef}>{props.children}</Fragment>
 }
 
-const InnerScrollAndFocusHandler = enableNewScrollHandler
-  ? InnerScrollAndFocusHandlerNew
+const InnerScrollAndMaybeFocusHandler = enableNewScrollHandler
+  ? InnerScrollHandlerNew
   : InnerScrollAndFocusHandlerOld
 
-function ScrollAndFocusHandler({
+function ScrollAndMaybeFocusHandler({
   segmentPath,
   children,
 }: {
@@ -380,12 +391,12 @@ function ScrollAndFocusHandler({
   }
 
   return (
-    <InnerScrollAndFocusHandler
+    <InnerScrollAndMaybeFocusHandler
       segmentPath={segmentPath}
       focusAndScrollRef={context.focusAndScrollRef}
     >
       {children}
-    </InnerScrollAndFocusHandler>
+    </InnerScrollAndMaybeFocusHandler>
   )
 }
 
@@ -768,7 +779,7 @@ export default function OuterLayoutRouter({
       <TemplateContext.Provider
         key={stateKey}
         value={
-          <ScrollAndFocusHandler segmentPath={segmentPath}>
+          <ScrollAndMaybeFocusHandler segmentPath={segmentPath}>
             <ErrorBoundary
               errorComponent={error}
               errorStyles={errorStyles}
@@ -809,7 +820,7 @@ export default function OuterLayoutRouter({
               </LoadingBoundary>
             </ErrorBoundary>
             {segmentViewStateNode}
-          </ScrollAndFocusHandler>
+          </ScrollAndMaybeFocusHandler>
         }
       >
         {templateStyles}

test/development/browser-logs/browser-logs.test.ts

@@ -8,8 +8,8 @@ import { retry } from 'next-test-utils'
 const bundlerName = process.env.IS_TURBOPACK_TEST ? 'Turbopack' : 'Webpack'
 const enableNewScrollHandler =
   process.env.__NEXT_EXPERIMENTAL_APP_NEW_SCROLL_HANDLER === 'true'
-const innerScrollAndFocusHandlerName = enableNewScrollHandler
-  ? 'InnerScrollAndFocusHandlerNew'
+const innerScrollAndMaybeFocusHandlerName = enableNewScrollHandler
+  ? 'InnerScrollHandlerNew'
   : 'InnerScrollAndFocusHandlerOld'
 
 function setupLogCapture() {
@@ -336,8 +336,8 @@ describe(`Terminal Logging (${bundlerName})`, () => {
 
          ...
            <RenderFromTemplateContext>
-             <ScrollAndFocusHandler segmentPath={[...]}>
-               <${innerScrollAndFocusHandlerName} segmentPath={[...]} focusAndScrollRef={{apply:false, ...}}>
+             <ScrollAndMaybeFocusHandler segmentPath={[...]}>
+               <${innerScrollAndMaybeFocusHandlerName} segmentPath={[...]} focusAndScrollRef={{apply:false, ...}}>
                  <ErrorBoundary errorComponent={undefined} errorStyles={undefined} errorScripts={undefined}>
                    <LoadingBoundary name="hydration-..." loading={null}>
                      <HTTPAccessFallbackBoundary notFound={undefined} forbidden={undefined} unauthorized={undefined}>

test/lib/next-test-utils.ts

@@ -1487,12 +1487,12 @@ const nextjsClientComponentNames = [
   'HTTPAccessFallbackErrorBoundary',
   'InnerLayoutRouter',
   'InnerScrollAndFocusHandlerOld',
-  'InnerScrollAndFocusHandlerNew',
+  'InnerScrollHandlerNew',
   'RedirectBoundary',
   'RedirectErrorBoundary',
   'RenderFromTemplateContext',
   'Root',
-  'ScrollAndFocusHandler',
+  'ScrollAndMaybeFocusHandler',
   'SegmentViewNode',
   'SegmentTrieNode',
   // These are added due to user actions e.g. loading.js -> LoadingBoundary