Fix [Breadcrumbs] Double scroll when selecting the last project

illia-prokopchuk · Nov 4, 2024 · ed61ee4 · ed61ee4
1 parent c8c3d6c
commit ed61ee4
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 10 deletions.
diff --git a/...ponents/JobWizard/JobWizardSteps/JobWizardFunctionSelection/JobWizardFunctionSelection.js b/...ponents/JobWizard/JobWizardSteps/JobWizardFunctionSelection/JobWizardFunctionSelection.js
@@ -92,7 +92,7 @@ const JobWizardFunctionSelection = ({
   const [functionsRequestErrorMessage, setFunctionsRequestErrorMessage] = useState('')
   const [hubFunctionsRequestErrorMessage, setHubFunctionsRequestErrorMessage] = useState('')
   const selectedActiveTab = useRef(null)
-  const functionSelectionRef = useRef(null)
+  const functionsContainerRef = useRef(null)
   const hubFunctionLoadedRef = useRef(false)
 
   const filtersStoreHubCategories = useSelector(
@@ -362,14 +362,14 @@ const JobWizardFunctionSelection = ({
     const isTabActive = selectedActiveTab.current && selectedActiveTab.current === activeTab
 
     if (stepIsActive && isTabActive) {
-      scrollToElement(functionSelectionRef, '.selected')
+      scrollToElement(functionsContainerRef, '.selected')
     } else if (!stepIsActive && !isTabActive) {
       setActiveTab(selectedActiveTab.current)
     }
   }, [stepIsActive, activeTab, setActiveTab, selectedActiveTab])
 
   return (
-    <div ref={functionSelectionRef} className="job-wizard__function-selection">
+    <div className="job-wizard__function-selection">
       <div className="form-row">
         <h5 className="form-step-title">Function selection</h5>
       </div>
@@ -404,7 +404,7 @@ const JobWizardFunctionSelection = ({
             isEmpty(functions)) ? (
             <NoData message={functionsRequestErrorMessage} />
           ) : (
-            <div className="functions-list">
+            <div className="functions-list" ref={functionsContainerRef}>
               {(filteredFunctions.length > 0 ? filteredFunctions : functions)
                 .sort((prevFunc, nextFunc) => prevFunc.name.localeCompare(nextFunc.name))
                 .map(functionData => {
@@ -455,7 +455,7 @@ const JobWizardFunctionSelection = ({
             isEmpty(templates)) ? (
             <NoData message={hubFunctionsRequestErrorMessage} />
           ) : (
-            <div className="functions-list">
+            <div className="functions-list" ref={functionsContainerRef}>
               {filteredTemplates
                 .sort((prevTemplate, nextTemplate) =>
                   prevTemplate.metadata.name.localeCompare(nextTemplate.metadata.name)

diff --git a/src/utils/scroll.util.js b/src/utils/scroll.util.js
@@ -31,10 +31,23 @@ export const scrollToElement = (
   shouldScrollToTop
     ? parentRef.current.scrollTo({ top: 0, left: 0, behavior: 'smooth' })
     : setTimeout(() => {
-        selectedElement.scrollIntoView({
-          behavior: 'smooth',
-          block: 'center',
-          inline: 'start'
-        })
+        scrollToCenter(parentRef?.current, selectedElement)
       }, timeoutDuration)
 }
+
+const scrollToCenter = (container, element) => {
+  const containerRect = container.getBoundingClientRect()
+  const elementRect = element.getBoundingClientRect()
+
+  const scrollTop =
+    container.scrollTop +
+    elementRect.top -
+    containerRect.top -
+    container.clientHeight / 2 +
+    elementRect.height / 2
+
+  container.scrollTo({
+    top: scrollTop,
+    behavior: 'smooth'
+  })
+}