WD-8541 - fix: Scroll to the top of Config Panel if error occurs (#1690)

src/components/ScrollOnRender/ScrollOnRender.test.tsx

@@ -7,4 +7,25 @@ describe("ScrollOnRender", () => {
     render(<ScrollOnRender>kids</ScrollOnRender>);
     expect(screen.getByText("kids")).toBeInTheDocument();
   });
+
+  it("shouldn't scroll into view if no scroll area is provided", () => {
+    render(<ScrollOnRender>kids</ScrollOnRender>);
+    expect(window.HTMLElement.prototype.scrollIntoView).not.toHaveBeenCalled();
+  });
+
+  it("shouldn't scroll into view if scroll area is null", () => {
+    render(<ScrollOnRender scrollArea={null}>kids</ScrollOnRender>);
+    expect(window.HTMLElement.prototype.scrollIntoView).not.toHaveBeenCalled();
+  });
+
+  it("should scroll into view if scroll area is provided", () => {
+    render(
+      <ScrollOnRender scrollArea={document.createElement("div")}>
+        kids
+      </ScrollOnRender>,
+    );
+    expect(window.HTMLElement.prototype.scrollIntoView).toHaveBeenCalledWith({
+      behavior: "smooth",
+    });
+  });
 });

src/components/ScrollOnRender/ScrollOnRender.tsx

@@ -1,14 +1,16 @@
-import type { PropsWithChildren } from "react";
-
-import { useScrollOnRender } from "hooks/useScrollOnRender";
+import { useEffect, type PropsWithChildren } from "react";
 
 type Props = {
   scrollArea?: HTMLElement | null;
 } & PropsWithChildren;
 
 const ScrollOnRender = ({ children, scrollArea }: Props) => {
-  const onRenderRef = useScrollOnRender(scrollArea);
-  return <div ref={onRenderRef}>{children}</div>;
+  useEffect(() => {
+    if (scrollArea) {
+      scrollArea.scrollIntoView({ behavior: "smooth" });
+    }
+  }, [scrollArea]);
+  return <div>{children}</div>;
 };
 
 export default ScrollOnRender;

src/setupTests.js

@@ -18,6 +18,15 @@ if (!window.HTMLDivElement.prototype.animate) {
   );
 }
 
+if (!window.HTMLElement.prototype.scrollIntoView) {
+  window.HTMLElement.prototype.scrollIntoView = jest.fn();
+} else {
+  console.error(
+    "JSDOM appears to support scroll into view",
+    "you may now remove the mock",
+  );
+}
+
 class ResizeObserver {
   observe = jest.fn();
   unobserve = jest.fn();