@topconsultnpm/sdkui-react-beta 6.14.142 → 6.14.143

package/lib/components/grids/TMBlogs.js

@@ -409,25 +409,26 @@ const TMBlogs = (props) => {
             handleFocusedBlog(blogPosts[blogPosts.length - 1]);
         }
     }, [shouldSelectLastBlog, blogPosts]);
-    // Scroll the focused blog post into view
-    useEffect(() => {
-        if (focusedBlog && focusedBlog.id && containerRef.current) {
-            const focusedElement = document.getElementById(id + "-" + uiId + "-" + focusedBlog.id.toString());
-            if (focusedElement) {
-                focusedElement.scrollIntoView({ behavior: 'smooth', block: 'center' });
-            }
-        }
-    }, [focusedBlog]);
     const ThumbnailView = () => {
         const scrollRef = useRef(null);
         useEffect(() => {
-            if (focusedBlog && focusedBlog.id) { // containerRef.current
+            // Check if there's a focused blog post, its ID is valid, and the scroll container exists
+            if (focusedBlog && focusedBlog.id && scrollRef.current) {
+                const container = scrollRef.current;
+                // Find the DOM element for the focused blog using its composed ID
                 const focusedElement = document.getElementById(id + "-" + uiId + "-" + focusedBlog.id.toString());
                 if (focusedElement) {
-                    focusedElement.scrollIntoView({ behavior: 'smooth', block: 'center' });
+                    // Get the position of the container and the focused element
+                    const containerRect = container.getBoundingClientRect();
+                    const elRect = focusedElement.getBoundingClientRect();
+                    // Calculate the offset needed to center the focused element in the container
+                    const offset = elRect.top - containerRect.top - container.clientHeight / 2 + focusedElement.clientHeight / 2;
+                    // Scroll the container to center the focused element smoothly
+                    container.scrollTo({ top: container.scrollTop + offset, behavior: 'smooth', });
                 }
             }
             else {
+                // If there's no focused blog and the user didn't right-click on the background, and the scroll flag is set, scroll to the bottom of the container
                 if (!rightClickedOnBackground && scrollToBottom && scrollRef.current) {
                     scrollRef.current.scrollTop = scrollRef.current.scrollHeight;
                 }

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@topconsultnpm/sdkui-react-beta",
-    "version": "6.14.142",
+    "version": "6.14.143",
     "description": "",
     "scripts": {
         "test": "echo \"Error: no test specified\" && exit 1",