ui: fix scroll to invalid text field in iOS devices

fixes #1248

Some iOS browser have a security restrictions to prevent
programmatically focusing on elements without direct user interaction.
This preventing from scrolling to the invalid field if that field was a
text field.

Scroll to the first invalid field in all cases, and try to focus on text
field. If it does not work, at least the invalid field will be visible
on screen.

Change scrolling method from `window.scrollTo` to
`element.scrollIntoView` as the latter focuses more on the element
itself and should be preferred when the intention is to make the element
visible.

Author: tahini

packages/evolution-frontend/src/components/hooks/__tests__/useSectionTemplate.test.ts

@@ -58,6 +58,10 @@ describe('useSectionTemplate', () => {
     });
 
     it('should focus on the first invalid input if form is submitted and not all widgets are valid', () => {
+        // Setup scrollIntoView mock
+        const scrollIntoViewMock = jest.fn();
+        Element.prototype.scrollIntoView = scrollIntoViewMock;
+
         document.body.innerHTML = `
             <div class="question-invalid">
                 <input id="invalid-input" type="text" />
@@ -66,24 +70,32 @@ describe('useSectionTemplate', () => {
         props.allWidgetsValid = false;
         props.submitted = true;
         renderHook(() => useSectionTemplate(props), { wrapper: MemoryRouter });
+        
+        // Verify scrollIntoView was called
+        expect(scrollIntoViewMock).toHaveBeenCalledWith({ behavior: 'smooth', block: 'nearest' });
+        
+        // Verify focus was set on text input
         const inputElement = document.getElementById('invalid-input');
         expect(document.activeElement).toBe(inputElement);
     });
 
     it('should scroll to the first invalid question if form is submitted and not all widgets are valid', () => {
-        const gotoPosition = 1000;
+        // Setup scrollIntoView mock
+        const scrollIntoViewMock = jest.fn();
+        Element.prototype.scrollIntoView = scrollIntoViewMock;
+        
         document.body.innerHTML = `
-            <div class="question-invalid" style="margin-top: 1000px;">
+            <div class="question-invalid">
                 <input id="invalid-input" type="checkbox" />
             </div>
         `;
-        const invalidElement = document.querySelector('.question-invalid');
-        Object.defineProperty(invalidElement, 'offsetTop', { value: gotoPosition });
-        window.scrollTo = jest.fn();
+        
         props.allWidgetsValid = false;
         props.submitted = true;
         renderHook(() => useSectionTemplate(props), { wrapper: MemoryRouter });
-        expect(window.scrollTo).toHaveBeenCalledWith(0, gotoPosition);
+        
+        // Verify scrollIntoView was called with correct parameters
+        expect(scrollIntoViewMock).toHaveBeenCalledWith({ behavior: 'smooth', block: 'nearest' });
     });
 
 });

packages/evolution-frontend/src/components/hooks/useSectionTemplate.ts

@@ -6,7 +6,6 @@
  */
 import { useEffect, useState } from 'react';
 import { getPathForSection } from '../../services/url'; // Adjust the import path
-import _get from 'lodash/get';
 import { SectionConfig, UserRuntimeInterviewAttributes } from 'evolution-common/lib/services/questionnaire/types';
 import { CliUser } from 'chaire-lib-common/lib/services/user/userType';
 import { InterviewUpdateCallbacks } from 'evolution-common/lib/services/questionnaire/types';
@@ -46,23 +45,24 @@ export function useSectionTemplate(props: SectionProps) {
     // Scroll to first invalid component, if any
     useEffect(() => {
         if (!props.allWidgetsValid && props.submitted && props.loadingState === 0) {
-            const invalidInputs = document.querySelectorAll('.question-invalid input') as NodeListOf<HTMLInputElement>;
+            // Scroll to the position of the first invalid question in all
+            // cases. Some browsers, like Safari iOS have security features
+            // preventing focus without explicit user interaction (and this is
+            // not considered one)
+            const firstInvalidElement = document.getElementsByClassName('question-invalid')[0];
+            if (firstInvalidElement) {
+                firstInvalidElement.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
+            }
+
             // Not all widgets types focus correclty on all browsers, so we do the
-            // actual focus only on text widgets. For the others, we scroll to the
-            // position of the first invalid question to make sure it is in view. This
-            // works for all widgets types.
+            // actual focus only on text widgets.
+            const invalidInputs = document.querySelectorAll('.question-invalid input') as NodeListOf<HTMLInputElement>;
             if (invalidInputs.length > 0 && invalidInputs[0].id && invalidInputs[0].type === 'text') {
                 // Focus on invalid input if found, it has an ID, and is of type text
                 const inputElement = document.getElementById(invalidInputs[0].id);
                 if (inputElement) {
                     inputElement.focus();
                 }
-            } else {
-                // Otherwise scroll to the position of the first invalid question
-                const scrollPosition = _get(document.getElementsByClassName('question-invalid'), '[0].offsetTop', null);
-                if (scrollPosition && scrollPosition >= 0) {
-                    window.scrollTo(0, scrollPosition);
-                }
             }
         }
     }, [props.allWidgetsValid, props.submitted, props.loadingState]);