Fix scroll issue in search page (#86)

Signed-off-by: Cintia Sanchez Garcia <cynthiasg@icloud.com>

web/clo-ui/src/components/Pagination/Pagination.tsx

@@ -1,7 +1,7 @@
 import classnames from 'classnames';
 import { isString } from 'lodash';
 import isNumber from 'lodash/isNumber';
-import React, { useEffect, useState } from 'react';
+import React, { useEffect, useRef, useState } from 'react';
 import { FaCaretLeft, FaCaretRight } from 'react-icons/fa';
 
 import styles from './Pagination.module.css';
@@ -40,23 +40,31 @@ const getPaginationOptions = (currentPage: number, pageCount: number): (string |
   return range;
 };
 
-const PaginationBtn: React.FC<ButtonProps> = (btnProps: ButtonProps) => (
-  <button
-    className={classnames('page-link rounded-0', {
-      'text-primary': !btnProps.disabled && btnProps.active !== btnProps.pageNumber,
-    })}
-    onClick={() => {
-      if (btnProps.active !== btnProps.pageNumber) {
-        btnProps.onChange(btnProps.pageNumber);
-      }
-    }}
-    aria-label={`Open ${isString(btnProps.content) ? btnProps.content : `page ${btnProps.pageNumber}`}`}
-    disabled={btnProps.disabled}
-    tabIndex={btnProps.disabled ? -1 : 0}
-  >
-    {btnProps.content || btnProps.pageNumber}
-  </button>
-);
+const PaginationBtn: React.FC<ButtonProps> = (btnProps: ButtonProps) => {
+  const buttonRef = useRef<HTMLButtonElement>(null);
+
+  return (
+    <button
+      ref={buttonRef}
+      className={classnames('page-link rounded-0', {
+        'text-primary': !btnProps.disabled && btnProps.active !== btnProps.pageNumber,
+      })}
+      onClick={() => {
+        if (btnProps.active !== btnProps.pageNumber) {
+          if (buttonRef && buttonRef.current) {
+            buttonRef.current.blur();
+          }
+          btnProps.onChange(btnProps.pageNumber);
+        }
+      }}
+      aria-label={`Open ${isString(btnProps.content) ? btnProps.content : `page ${btnProps.pageNumber}`}`}
+      disabled={btnProps.disabled}
+      // tabIndex={btnProps.disabled ? -1 : 0}
+    >
+      {btnProps.content || btnProps.pageNumber}
+    </button>
+  );
+};
 
 export const Pagination: React.FC<IPaginationProps> = (props: IPaginationProps) => {
   const [totalPages, setTotalPages] = useState(Math.ceil(props.total / props.limit));

web/package.json

@@ -13,7 +13,8 @@
     "react-icons": "^4.7.1",
     "react-router-dom": "^6.4.5",
     "source-map-explorer": "^2.5.3",
-    "tinycolor2": "^1.4.2"
+    "tinycolor2": "^1.4.2",
+    "ua-parser-js": "^1.0.32"
   },
   "devDependencies": {
     "@testing-library/jest-dom": "^5.14.1",

web/src/utils/browserDetect.ts

@@ -0,0 +1,20 @@
+const parser = require('ua-parser-js');
+
+class BrowserDetect {
+  private ua: any = {};
+
+  public init() {
+    this.ua = parser(navigator.userAgent);
+  }
+
+  public isSafari(): boolean {
+    if (this.ua.browser.name.includes('Safari')) {
+      return true;
+    }
+    return false;
+  }
+}
+
+const browserDetect = new BrowserDetect();
+browserDetect.init();
+export default browserDetect;

web/src/utils/scrollToTop.ts

@@ -1,5 +1,12 @@
+import browserDetect from './browserDetect';
+
 const scrollToTop = (): void => {
-  window.scrollTo(0, 0);
+  const isSafari = browserDetect.isSafari();
+  window.scrollTo({
+    top: 0,
+    // @ts-ignore: Unreachable code error
+    behavior: isSafari ? 'instant' : 'auto',
+  });
 };
 
 export default scrollToTop;

web/yarn.lock

@@ -8717,6 +8717,11 @@ typescript@^4.9.4:
   resolved "https://registry.yarnpkg.com/typescript/-/typescript-4.9.4.tgz#a2a3d2756c079abda241d75f149df9d561091e78"
   integrity sha512-Uz+dTXYzxXXbsFpM86Wh3dKCxrQqUcVMxwU54orwlJjOpO3ao8L7j5lH+dWfTwgCwIuM9GQ2kvVotzYJMXTBZg==
 
+ua-parser-js@^1.0.32:
+  version "1.0.32"
+  resolved "https://registry.yarnpkg.com/ua-parser-js/-/ua-parser-js-1.0.32.tgz#786bf17df97de159d5b1c9d5e8e9e89806f8a030"
+  integrity sha512-dXVsz3M4j+5tTiovFVyVqssXBu5HM47//YSOeZ9fQkdDKkfzv2v3PP1jmH6FUyPW+yCSn7aBVK1fGGKNhowdDA==
+
 unbox-primitive@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/unbox-primitive/-/unbox-primitive-1.0.2.tgz#29032021057d5e6cdbd08c5129c226dff8ed6f9e"