From e8991b3ebfc10da9f978bdd506f67cba5c6c877b Mon Sep 17 00:00:00 2001
From: Karoline Tufte Lien <karoline@dhis2.org>
Date: Thu, 28 May 2026 15:20:53 +0200
Subject: [PATCH] fix: [DHIS2-21286] scroll first failed field clear of sticky
 ScopeSelector

Two bugs caused validation-failure scroll to land in the wrong place:

1. withGotoInterface wrapped its class in forwardRef during the React 18
   migration (09ed2839e). The outer ref then pointed at the inner field
   component, not GotoFieldInterface, so .goto() silently no-op'd on every
   D2Form section field. Drop the wrapper - no consumer reads the
   forwarded ref.

2. Both goto() implementations did scrollIntoView() then post-corrected
   with window.scroll(0, scrolledY - 48). The guard skipped the correction
   whenever scrolledY === 0 (e.g. OccurredAt near top of doc), leaving the
   field flush with the viewport top - and behind the sticky ScopeSelector
   bar. Use scrollIntoView({block:'start'}) + scrollMarginTop:80px on the
   wrapper so the browser lands the field 80px below the viewport top
   regardless of position.

AI Assisted

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 .../internal/DataEntryField.component.tsx     |  8 ++-----
 .../FormFields/New/HOC/withGotoInterface.tsx  | 24 +++++--------------
 2 files changed, 8 insertions(+), 24 deletions(-)

diff --git a/src/core_modules/capture-core/components/DataEntry/dataEntryField/internal/DataEntryField.component.tsx b/src/core_modules/capture-core/components/DataEntry/dataEntryField/internal/DataEntryField.component.tsx
index f9b8e9e624..ec5933ad19 100644
--- a/src/core_modules/capture-core/components/DataEntry/dataEntryField/internal/DataEntryField.component.tsx
+++ b/src/core_modules/capture-core/components/DataEntry/dataEntryField/internal/DataEntryField.component.tsx
@@ -19,12 +19,7 @@ class DataEntryFieldPlain extends React.Component<Props> {
 
     goto() {
         if (this.gotoInstance) {
-            this.gotoInstance.scrollIntoView();
-
-            const scrolledY = window.scrollY;
-            if (scrolledY) {
-                window.scroll(0, scrolledY - 48);
-            }
+            this.gotoInstance.scrollIntoView({ block: 'start' });
         }
     }
 
@@ -60,6 +55,7 @@ class DataEntryFieldPlain extends React.Component<Props> {
                 ref={(gotoInstance) => { this.gotoInstance = gotoInstance; }}
                 key={propName}
                 data-test={`dataentry-field-${propName}`}
+                style={{ scrollMarginTop: '80px' }}
             >
                 <Component
                     onBlur={this.handleSet}
diff --git a/src/core_modules/capture-core/components/FormFields/New/HOC/withGotoInterface.tsx b/src/core_modules/capture-core/components/FormFields/New/HOC/withGotoInterface.tsx
index 872b2116c4..778ead9238 100644
--- a/src/core_modules/capture-core/components/FormFields/New/HOC/withGotoInterface.tsx
+++ b/src/core_modules/capture-core/components/FormFields/New/HOC/withGotoInterface.tsx
@@ -1,38 +1,26 @@
-import React, { forwardRef } from 'react';
+import * as React from 'react';
 
 export const withGotoInterface = () =>
-    (InnerComponent: React.ComponentType<any>) => {
+    (InnerComponent: React.ComponentType<any>) =>
         class GotoFieldInterface extends React.Component<any> {
             gotoInstance: any;
 
             goto() {
                 if (this.gotoInstance) {
-                    this.gotoInstance.scrollIntoView();
-
-                    const scrolledY = window.scrollY;
-                    if (scrolledY) {
-                        // TODO: Set the modifier some other way (caused be the fixed header)
-                        window.scroll(0, scrolledY - 48);
-                    }
+                    this.gotoInstance.scrollIntoView({ block: 'start' });
                 }
             }
 
             render() {
-                const { forwardedRef, ...rest } = this.props;
                 return (
                     <div
                         ref={(gotoInstance) => { this.gotoInstance = gotoInstance; }}
+                        style={{ scrollMarginTop: '80px' }}
                     >
                         <InnerComponent
-                            ref={forwardedRef}
-                            {...rest}
+                            {...this.props}
                         />
                     </div>
                 );
             }
-        }
-
-        return forwardRef<any, any>((props, ref) => (
-            <GotoFieldInterface {...props} forwardedRef={ref} />
-        ));
-    };
+        };