Fix: keep scroll on load more in React view

CHANGES.rst

@@ -5,6 +5,9 @@ Changelog
 1.2.65 (unreleased)
 -------------------
 
+- Fix: keep scroll on load more in React view
+  [thomlamb]
+
 - WEB-4132 : In anonymous mode, use remoteUrl instead of internal link url in links sections
   [boulch]
 

src/imio/smartweb/core/webcomponents/src/components/Annuaire/Annuaire.jsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useState, useRef } from "react";
+import React, { useEffect, useState, useContext, useRef } from "react";
 import { BrowserRouter, Routes, Route } from "react-router-dom";
 import { ScrollContext } from "../../hooks/ScrollContext";
 import Filters from "./Filters/Filter";
@@ -41,6 +41,7 @@ function AnnuaireView(props) {
         { b_start: 0, fullobjects: 1 },
         queryString.parse(useFilterQuery().toString())
     );
+    const { scrollPos, updateScrollPos } = useContext(ScrollContext);
     const [contactArray, setcontactArray] = useState([]);
     const [contactNumber, setcontactNumber] = useState([]);
     const [clickId, setClickId] = useState(null);
@@ -95,6 +96,7 @@ function AnnuaireView(props) {
 
     // set batch
     const loadMore = () => {
+        updateScrollPos(window.scrollY);
         setBatchStart((batchStart) => batchStart + parseInt(props.batchSize));
         setLoadMoreLaunch(true);
     };

src/imio/smartweb/core/webcomponents/src/components/Annuaire/ContactList/ContactList.jsx

@@ -4,7 +4,6 @@ import { Link } from "react-router-dom";
 import removeAccents from "remove-accents";
 import { ScrollContext } from "../../../hooks/ScrollContext";
 const ContactList = ({ contactArray, onChange, onHover, parentCallback }) => {
-
     const { scrollPos, updateScrollPos } = useContext(ScrollContext);
 
     function handleClick(event) {
@@ -17,11 +16,8 @@ const ContactList = ({ contactArray, onChange, onHover, parentCallback }) => {
     }
 
     useEffect(() => {
-    window.scrollTo(
-        { top: scrollPos,
-        left: 0,
-        behavior: 'instant'});
-}, [contactArray]);
+        window.scrollTo({ top: scrollPos, left: 0, behavior: "instant" });
+    }, [contactArray]);
     return (
         <React.Fragment>
             <ul className="r-result-list annuaire-result-list">

src/imio/smartweb/core/webcomponents/src/components/Events/Events.jsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useState, useRef } from "react";
+import React, { useEffect, useState, useContext, useRef } from "react";
 import { BrowserRouter, Routes, Route } from "react-router-dom";
 import { ScrollContext } from "../../hooks/ScrollContext";
 import Filters from "./Filters/Filter";
@@ -51,6 +51,7 @@ function EventsView(props) {
         },
         queryString.parse(useFilterQuery().toString())
     );
+    const { scrollPos, updateScrollPos } = useContext(ScrollContext);
     const [itemsArray, setItemsArray] = useState([]);
     const [itemsNumber, setItemsNumber] = useState([]);
     const [clickId, setClickId] = useState(null);
@@ -106,6 +107,7 @@ function EventsView(props) {
 
     // set batch
     const loadMore = () => {
+        updateScrollPos(window.scrollY);
         setBatchStart((batchStart) => batchStart + parseInt(props.batchSize));
         setLoadMoreLaunch(true);
     };

src/imio/smartweb/core/webcomponents/src/components/News/News.jsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useState, createContext } from "react";
+import React, { useEffect, useState, useContext, createContext } from "react";
 import { BrowserRouter, Routes, Route } from "react-router-dom";
 import { ScrollContext } from "../../hooks/ScrollContext";
 import Filters from "./Filters/Filter";
@@ -43,6 +43,7 @@ const NewsView = (props) => {
         { b_start: 0, fullobjects: 1 },
         queryString.parse(useFilterQuery().toString())
     );
+    const { scrollPos, updateScrollPos } = useContext(ScrollContext);
     const [itemsArray, setItemsArray] = useState([]);
     const [itemsNumber, setItemsNumber] = useState([]);
     const [clickId, setClickId] = useState(null);
@@ -89,6 +90,7 @@ const NewsView = (props) => {
 
     // set batch
     const loadMore = () => {
+        updateScrollPos(window.scrollY);
         setBatchStart((batchStart) => batchStart + parseInt(props.batchSize));
         setLoadMoreLaunch(true);
     };