fix(issues): Switch from scrollIntoView to scrollTo (#76248)

Author: scttcper

static/app/components/scrollCarousel.spec.tsx

@@ -41,13 +41,14 @@ describe('ScrollCarousel', function () {
 
   it('shows right arrow when elements exist to the right', async function () {
     render(
-      <ScrollCarousel>
+      <ScrollCarousel data-test-id="scroll">
         <div data-test-id="child-1" />
         <div data-test-id="child-2" />
         <div data-test-id="child-3" />
       </ScrollCarousel>
     );
 
+    const scrollContainer = screen.getByTestId('scroll');
     const elements = [
       screen.getByTestId('child-1'),
       screen.getByTestId('child-2'),
@@ -66,21 +67,22 @@ describe('ScrollCarousel', function () {
     const rightButton = screen.getByRole('button', {name: 'Scroll right'});
     expect(screen.queryByRole('button', {name: 'Scroll left'})).not.toBeInTheDocument();
 
-    // Test scroll into view, the last element should have its 'scrollIntoView' called
-    elements.at(-1)!.scrollIntoView = jest.fn();
+    // Test scroll into view, the last element should have its 'scrollTo' called
+    scrollContainer.scrollTo = jest.fn();
     await userEvent.click(rightButton);
-    expect(elements.at(-1)!.scrollIntoView).toHaveBeenCalled();
+    expect(scrollContainer.scrollTo).toHaveBeenCalled();
   });
 
   it('shows left arrow when elements exist to the left', async function () {
     render(
-      <ScrollCarousel>
+      <ScrollCarousel data-test-id="scroll">
         <div data-test-id="child-1" />
         <div data-test-id="child-2" />
         <div data-test-id="child-3" />
       </ScrollCarousel>
     );
 
+    const scrollContainer = screen.getByTestId('scroll');
     const elements = [
       screen.getByTestId('child-1'),
       screen.getByTestId('child-2'),
@@ -99,9 +101,9 @@ describe('ScrollCarousel', function () {
     const leftButton = await screen.findByRole('button', {name: 'Scroll left'});
     expect(screen.queryByRole('button', {name: 'Scroll right'})).not.toBeInTheDocument();
 
-    // Test scroll into view, the 1st element should have its 'scrollIntoView' called
-    elements[0].scrollIntoView = jest.fn();
+    // Test scroll into view, the 1st element should have its 'scrollTo' called
+    scrollContainer.scrollTo = jest.fn();
     await userEvent.click(leftButton);
-    expect(elements[0].scrollIntoView).toHaveBeenCalled();
+    expect(scrollContainer.scrollTo).toHaveBeenCalled();
   });
 });

static/app/components/scrollCarousel.tsx

@@ -12,6 +12,7 @@ import {useRefChildrenVisibility} from 'sentry/utils/useRefChildrenVisibility';
 interface ScrollCarouselProps {
   children: React.ReactNode;
   className?: string;
+  'data-test-id'?: string;
   gap?: ValidSize;
 }
 
@@ -32,7 +33,26 @@ const DEFAULT_VISIBLE_RATIO = 0.85;
  */
 const DEFAULT_JUMP_ITEM_COUNT = 2;
 
-export function ScrollCarousel({children, className, gap = 1}: ScrollCarouselProps) {
+/**
+ * Calculates the offset rectangle of an element relative to another element.
+ */
+const getOffsetRect = (el: HTMLElement, relativeTo: HTMLElement) => {
+  const rect = el.getBoundingClientRect();
+  if (!relativeTo) {
+    return rect;
+  }
+  const relativeRect = relativeTo.getBoundingClientRect();
+  return {
+    left: rect.left - relativeRect.left,
+    top: rect.top - relativeRect.top,
+    right: rect.right - relativeRect.left,
+    bottom: rect.bottom - relativeRect.top,
+    width: rect.width,
+    height: rect.height,
+  };
+};
+
+export function ScrollCarousel({children, gap = 1, ...props}: ScrollCarouselProps) {
   const scrollContainerRef = useRef<HTMLDivElement | null>(null);
   const {visibility, childrenEls} = useRefChildrenVisibility({
     children,
@@ -47,10 +67,11 @@ export function ScrollCarousel({children, className, gap = 1}: ScrollCarouselPro
     const scrollIndex = visibility.findIndex(Boolean);
     // Clamp the scroll index to the first visible item
     const clampedIndex = Math.max(scrollIndex - DEFAULT_JUMP_ITEM_COUNT, 0);
-    childrenEls[clampedIndex]?.scrollIntoView({
+    // scrollIntoView scrolls the entire page on some browsers
+    scrollContainerRef.current?.scrollTo({
       behavior: 'smooth',
-      block: 'nearest',
-      inline: 'start',
+      // We don't need to do any fancy math for the left edge
+      left: getOffsetRect(childrenEls[clampedIndex], childrenEls[0]).left,
     });
   }, [visibility, childrenEls]);
 
@@ -61,20 +82,20 @@ export function ScrollCarousel({children, className, gap = 1}: ScrollCarouselPro
       scrollIndex + DEFAULT_JUMP_ITEM_COUNT,
       visibility.length - 1
     );
-    childrenEls[clampedIndex]?.scrollIntoView({
+
+    const targetElement = childrenEls[clampedIndex];
+    const targetElementRight = getOffsetRect(targetElement, childrenEls[0]).right;
+    const containerRight = scrollContainerRef.current?.clientWidth ?? 0;
+    // scrollIntoView scrolls the entire page on some browsers
+    scrollContainerRef.current?.scrollTo({
       behavior: 'smooth',
-      block: 'nearest',
-      inline: 'end',
+      left: Math.max(targetElementRight - containerRight, 0),
     });
   }, [visibility, childrenEls]);
 
   return (
     <ScrollCarouselWrapper>
-      <ScrollContainer
-        ref={scrollContainerRef}
-        className={className}
-        style={{gap: space(gap)}}
-      >
+      <ScrollContainer ref={scrollContainerRef} style={{gap: space(gap)}} {...props}>
         {children}
       </ScrollContainer>
       {!isAtStart && <LeftMask />}