From 5a9689b5abab3a5d85ecf3c0b10b9f14f07b8d05 Mon Sep 17 00:00:00 2001
From: Santiago Palenque <santipalenque@gmail.com>
Date: Fri, 7 Aug 2026 12:36:10 -0300
Subject: [PATCH 1/2] chore: change useScrollToError to allow switch tab, and
 apply to edit activity type

---
 src/hooks/__tests__/useScrollToError.test.js  | 131 ++++++++++++++++++
 src/hooks/useScrollToError.js                 |  92 +++++++++---
 .../__tests__/event-type-dialog.test.js       |  22 +++
 .../events/components/event-type-dialog.js    |  14 +-
 4 files changed, 233 insertions(+), 26 deletions(-)
 create mode 100644 src/hooks/__tests__/useScrollToError.test.js

diff --git a/src/hooks/__tests__/useScrollToError.test.js b/src/hooks/__tests__/useScrollToError.test.js
new file mode 100644
index 000000000..c31091779
--- /dev/null
+++ b/src/hooks/__tests__/useScrollToError.test.js
@@ -0,0 +1,131 @@
+// @testing-library/react 12 (React 16) does not export renderHook; use a
+// lightweight component wrapper instead.
+import "@testing-library/jest-dom";
+import React, { useState } from "react";
+import { act, render, screen } from "@testing-library/react";
+import { useFormik } from "formik";
+import useScrollToError from "../useScrollToError";
+
+window.HTMLElement.prototype.scrollIntoView = jest.fn();
+
+// jsdom implements no layout, so offsetParent is always null regardless of
+// CSS. Reflect the one hiding mechanism this hook cares about (the `hidden`
+// attribute) so tests can simulate real display:none semantics.
+beforeAll(() => {
+  Object.defineProperty(window.HTMLElement.prototype, "offsetParent", {
+    configurable: true,
+    get() {
+      let node = this;
+      while (node) {
+        if (node.hidden) return null;
+        node = node.parentElement;
+      }
+      return document.body;
+    }
+  });
+});
+
+beforeEach(() => {
+  window.HTMLElement.prototype.scrollIntoView.mockClear();
+});
+
+const flushDoubleRaf = () =>
+  act(
+    () =>
+      new Promise((resolve) => {
+        requestAnimationFrame(() => requestAnimationFrame(resolve));
+      })
+  );
+
+const TabbedHarness = ({ onActiveTabChange }) => {
+  const [activeTab, setActiveTab] = useState("b");
+  const formik = useFormik({
+    initialValues: { name: "" },
+    validate: (values) => (values.name ? {} : { name: "required" }),
+    onSubmit: () => {}
+  });
+
+  useScrollToError(formik, true, (value) => {
+    setActiveTab(value);
+    onActiveTabChange?.(value);
+  });
+
+  return (
+    <form onSubmit={formik.handleSubmit}>
+      <div data-tab-value="a" hidden={activeTab !== "a"}>
+        <input name="name" onChange={formik.handleChange} />
+      </div>
+      <div data-tab-value="b" hidden={activeTab !== "b"} />
+      <button type="submit">save</button>
+    </form>
+  );
+};
+
+const VisibleHarness = () => {
+  const formik = useFormik({
+    initialValues: { name: "" },
+    validate: (values) => (values.name ? {} : { name: "required" }),
+    onSubmit: () => {}
+  });
+
+  useScrollToError(formik, true, jest.fn());
+
+  return (
+    <form onSubmit={formik.handleSubmit}>
+      <input name="name" onChange={formik.handleChange} />
+      <button type="submit">save</button>
+    </form>
+  );
+};
+
+const UntaggedHarness = () => {
+  const formik = useFormik({
+    initialValues: { name: "" },
+    validate: (values) => (values.name ? {} : { name: "required" }),
+    onSubmit: () => {}
+  });
+
+  useScrollToError(formik, true);
+
+  return (
+    <form onSubmit={formik.handleSubmit}>
+      <input name="name" onChange={formik.handleChange} />
+      <button type="submit">save</button>
+    </form>
+  );
+};
+
+describe("useScrollToError (tab-aware)", () => {
+  it("switches to the owning tab and scrolls when the errored field is hidden", async () => {
+    const onActiveTabChange = jest.fn();
+    render(<TabbedHarness onActiveTabChange={onActiveTabChange} />);
+
+    await act(async () => {
+      screen.getByText("save").click();
+    });
+    await flushDoubleRaf();
+
+    expect(onActiveTabChange).toHaveBeenCalledWith("a");
+    expect(window.HTMLElement.prototype.scrollIntoView).toHaveBeenCalled();
+  });
+
+  it("does not switch tabs when the errored field is already visible", async () => {
+    render(<VisibleHarness />);
+
+    await act(async () => {
+      screen.getByText("save").click();
+    });
+
+    expect(window.HTMLElement.prototype.scrollIntoView).toHaveBeenCalled();
+  });
+
+  it("behaves as before when setActiveTab is not passed", async () => {
+    render(<UntaggedHarness />);
+
+    await act(async () => {
+      screen.getByText("save").click();
+    });
+
+    expect(window.HTMLElement.prototype.scrollIntoView).toHaveBeenCalled();
+  });
+});
diff --git a/src/hooks/useScrollToError.js b/src/hooks/useScrollToError.js
index 7579e47a8..bbb591cc5 100644
--- a/src/hooks/useScrollToError.js
+++ b/src/hooks/useScrollToError.js
@@ -27,7 +27,14 @@ function smoothScrollTo(targetScrollTop, duration) {
   requestAnimationFrame(animationStep);
 }
 
-const useScrollToError = (formik, relative = false) => {
+// Waits two animation frames so a DOM mutation applied just before this call
+// (e.g. React removing a tabpanel's `hidden` attribute after setActiveTab)
+// has been through layout before we measure/scroll against it.
+function afterNextLayout(callback) {
+  requestAnimationFrame(() => requestAnimationFrame(callback));
+}
+
+const useScrollToError = (formik, relative = false, setActiveTab) => {
   const { errors, isValid, isSubmitting } = formik;
   const errorArray = Object.keys(errors);
   const errorCount = errorArray.length;
@@ -35,32 +42,71 @@ const useScrollToError = (formik, relative = false) => {
   useEffect(() => {
     if (isValid || errorCount === 0) return;
 
-    const elementsSorted = errorArray
-      .reduce((result, error) => {
-        const element = document.querySelector(`[name='${error}']`);
-        if (!element) return result;
-
-        const rect = element.getBoundingClientRect();
-        const absoluteTop = rect.top + window.pageYOffset;
-
-        result.push({ element, top: absoluteTop });
-        return result;
-      }, [])
-      .sort((a, b) => a.top - b.top);
-
-    if (elementsSorted.length === 0) return;
+    const scrollToFirstVisible = () => {
+      const elementsSorted = errorArray
+        .reduce((result, error) => {
+          const element = document.querySelector(`[name='${error}']`);
+          if (!element) return result;
+
+          const rect = element.getBoundingClientRect();
+          const absoluteTop = rect.top + window.pageYOffset;
+
+          result.push({ element, top: absoluteTop });
+          return result;
+        }, [])
+        .sort((a, b) => a.top - b.top);
+
+      if (elementsSorted.length === 0) return;
+
+      const target = elementsSorted[0];
+
+      const offset = 100; // adjust as needed
+      const duration = 500; // 500ms scroll duration
+      const scrollToY = target.top - offset;
+
+      if (relative) {
+        target?.element.scrollIntoView({
+          behavior: "smooth",
+          block: "center"
+        });
+      } else {
+        smoothScrollTo(scrollToY, duration);
+      }
+    };
+
+    if (typeof setActiveTab !== "function") {
+      scrollToFirstVisible(); // unchanged path for every other call site
+      return;
+    }
 
-    const target = elementsSorted[0];
+    // Tab-aware path: panels in a tabbed form are typically mounted-but-
+    // hidden, so `[name=...]` selectors still match fields on an inactive
+    // tab, but measuring/scrolling a `display:none` element is meaningless.
+    // `offsetParent` is `null` for any element hidden via `display:none`,
+    // including via an ancestor's `hidden` attribute.
+    const matches = errorArray
+      .map((error) => document.querySelector(`[name='${error}']`))
+      .filter(Boolean);
+
+    const allMatchesHidden =
+      matches.length > 0 && matches.every((el) => el.offsetParent === null);
+
+    if (!allMatchesHidden) {
+      scrollToFirstVisible();
+      return;
+    }
 
-    const offset = 100; // adjust as needed
-    const duration = 500; // 500ms scroll duration
-    const scrollToY = target.top - offset;
+    // Every matched field is hidden: jump to the tab that owns the first
+    // errored field, then defer the scroll until it's actually visible.
+    const tabValue = matches[0].closest("[data-tab-value]")?.dataset.tabValue;
 
-    if (relative) {
-      target?.element.scrollIntoView({ behavior: "smooth", block: "center" });
-    } else {
-      smoothScrollTo(scrollToY, duration);
+    if (!tabValue) {
+      scrollToFirstVisible(); // not inside a tagged tab panel, fall back
+      return;
     }
+
+    setActiveTab(tabValue);
+    afterNextLayout(scrollToFirstVisible);
   }, [isSubmitting]);
 };
 
diff --git a/src/pages/events/components/__tests__/event-type-dialog.test.js b/src/pages/events/components/__tests__/event-type-dialog.test.js
index 117a18bd6..1ae1e8406 100644
--- a/src/pages/events/components/__tests__/event-type-dialog.test.js
+++ b/src/pages/events/components/__tests__/event-type-dialog.test.js
@@ -8,6 +8,7 @@ import {
 } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
 import EventTypeDialog from "../event-type-dialog";
+import useScrollToError from "../../../../hooks/useScrollToError";
 
 jest.mock("i18n-react/dist/i18n-react", () => ({
   translate: jest.fn((key) => key)
@@ -149,6 +150,27 @@ describe("EventTypeDialog", () => {
     expect(screen.getByTestId("textfield-name")).toBeInTheDocument();
   });
 
+  it("wires setActiveTab into useScrollToError for tab-aware error scrolling", () => {
+    renderDialog();
+
+    expect(useScrollToError).toHaveBeenCalledWith(
+      expect.anything(),
+      true,
+      expect.any(Function)
+    );
+  });
+
+  it("tags both tabpanels with their owning tab value", () => {
+    renderDialog();
+
+    expect(
+      document.querySelector("[data-tab-value=\"main\"]")
+    ).toBeInTheDocument();
+    expect(
+      document.querySelector("[data-tab-value=\"schedule_settings\"]")
+    ).toBeInTheDocument();
+  });
+
   it("disables the class_name select once the entity has an id", () => {
     renderDialog({ ...BASE_ENTITY, id: 5, class_name: "EVENT_TYPE" });
 
diff --git a/src/pages/events/components/event-type-dialog.js b/src/pages/events/components/event-type-dialog.js
index 9faa3427e..d7b50dce0 100644
--- a/src/pages/events/components/event-type-dialog.js
+++ b/src/pages/events/components/event-type-dialog.js
@@ -158,7 +158,7 @@ const EventTypeDialog = ({
 
   const { values, setFieldValue } = formik;
 
-  useScrollToError(formik, true);
+  useScrollToError(formik, true, setActiveTab);
 
   useEffect(() => {
     const errorFields = Object.keys(errors || {});
@@ -248,7 +248,11 @@ const EventTypeDialog = ({
               </Tabs>
             </Box>
 
-            <div role="tabpanel" hidden={activeTab !== "main"}>
+            <div
+              role="tabpanel"
+              hidden={activeTab !== "main"}
+              data-tab-value="main"
+            >
               <Grid2 container spacing={2} sx={{ mb: 2 }}>
                 <Grid2 size={{ xs: 12, md: 4 }}>
                   <InputLabel htmlFor="class_name">
@@ -577,7 +581,11 @@ const EventTypeDialog = ({
               )}
             </div>
 
-            <div role="tabpanel" hidden={activeTab !== "schedule_settings"}>
+            <div
+              role="tabpanel"
+              hidden={activeTab !== "schedule_settings"}
+              data-tab-value="schedule_settings"
+            >
               <Grid2 container spacing={2}>
                 <Grid2 size={12} sx={{ mt: "8px" }}>
                   <MuiFormikCheckbox

From 8272034ad921a09087f2cae08d2788148fdaeb8b Mon Sep 17 00:00:00 2001
From: Santiago Palenque <santipalenque@gmail.com>
Date: Fri, 7 Aug 2026 12:57:04 -0300
Subject: [PATCH 2/2] chore: adjust auto tab scroll on submition plans

---
 src/components/forms/__tests__/selection-plan-form.test.js  | 2 ++
 src/components/forms/selection-plan-form.js                 | 5 +++--
 .../forms/selection-plan-form/email-templates-tab.js        | 3 +++
 src/components/forms/selection-plan-form/main-tab.js        | 6 ++++++
 .../forms/selection-plan-form/track-chair-settings-tab.js   | 1 +
 src/hooks/__tests__/useScrollToError.test.js                | 4 ++--
 src/hooks/useScrollToError.js                               | 4 +++-
 .../events/components/__tests__/event-type-dialog.test.js   | 6 ++----
 src/pages/events/components/event-type-dialog.js            | 4 ++--
 9 files changed, 24 insertions(+), 11 deletions(-)

diff --git a/src/components/forms/__tests__/selection-plan-form.test.js b/src/components/forms/__tests__/selection-plan-form.test.js
index 35bce9f58..305384928 100644
--- a/src/components/forms/__tests__/selection-plan-form.test.js
+++ b/src/components/forms/__tests__/selection-plan-form.test.js
@@ -61,6 +61,8 @@ jest.mock("openstack-uicore-foundation/lib/utils/query-actions", () => ({
   queryEventTypes: jest.fn()
 }));
 
+jest.mock("../../../hooks/useScrollToError", () => jest.fn());
+
 jest.mock("../../mui/formik-inputs/mui-formik-datetimepicker", () => ({
   __esModule: true,
   default: ({ name }) => <div data-testid={name} />
diff --git a/src/components/forms/selection-plan-form.js b/src/components/forms/selection-plan-form.js
index 416062d9e..4ba555944 100644
--- a/src/components/forms/selection-plan-form.js
+++ b/src/components/forms/selection-plan-form.js
@@ -20,7 +20,7 @@ import { epochToMomentTimeZone } from "openstack-uicore-foundation/lib/utils/met
 import Box from "@mui/material/Box";
 import Tab from "@mui/material/Tab";
 import Tabs from "@mui/material/Tabs";
-import { scrollToError } from "../../utils/methods";
+import useScrollToError from "../../hooks/useScrollToError";
 import MainTab from "./selection-plan-form/main-tab";
 import TrackGroupsTab from "./selection-plan-form/track-groups-tab";
 import EventTypesTab from "./selection-plan-form/event-types-tab";
@@ -111,12 +111,13 @@ const SelectionPlanForm = (props) => {
   });
 
   useEffect(() => {
-    scrollToError(propsErrors);
     formik.setErrors(
       propsErrors && Object.keys(propsErrors).length > 0 ? propsErrors : {}
     );
   }, [propsErrors]);
 
+  useScrollToError(formik, true, setActiveTab);
+
   // Sync sub-resource arrays from Redux without resetting user-editable main tab fields
   useEffect(() => {
     formik.setValues((current) => ({
diff --git a/src/components/forms/selection-plan-form/email-templates-tab.js b/src/components/forms/selection-plan-form/email-templates-tab.js
index c822f0bbe..62a7e67d3 100644
--- a/src/components/forms/selection-plan-form/email-templates-tab.js
+++ b/src/components/forms/selection-plan-form/email-templates-tab.js
@@ -37,6 +37,7 @@ const EmailTemplatesTab = ({ hidden }) => {
             </label>
             <EmailTemplateInput
               id="presentation_creator_notification_email_template"
+              name="presentation_creator_notification_email_template"
               value={values.presentation_creator_notification_email_template}
               placeholder={T.translate(
                 "edit_selection_plan.placeholders.creator_notification_email_select_template"
@@ -55,6 +56,7 @@ const EmailTemplatesTab = ({ hidden }) => {
             </label>
             <EmailTemplateInput
               id="presentation_moderator_notification_email_template"
+              name="presentation_moderator_notification_email_template"
               value={values.presentation_moderator_notification_email_template}
               placeholder={T.translate(
                 "edit_selection_plan.placeholders.moderator_notification_email_select_template"
@@ -73,6 +75,7 @@ const EmailTemplatesTab = ({ hidden }) => {
             </label>
             <EmailTemplateInput
               id="presentation_speaker_notification_email_template"
+              name="presentation_speaker_notification_email_template"
               value={values.presentation_speaker_notification_email_template}
               placeholder={T.translate(
                 "edit_selection_plan.placeholders.speaker_notification_email_select_template"
diff --git a/src/components/forms/selection-plan-form/main-tab.js b/src/components/forms/selection-plan-form/main-tab.js
index f87df7bc2..7cb7f794c 100644
--- a/src/components/forms/selection-plan-form/main-tab.js
+++ b/src/components/forms/selection-plan-form/main-tab.js
@@ -40,6 +40,7 @@ const MainTab = ({ hidden, currentSummit }) => {
           <label> {T.translate("edit_selection_plan.name")} *</label>
           <TextField
             id="name"
+            name="name"
             fullWidth
             size="small"
             error={!!hasErrors("name")}
@@ -53,6 +54,7 @@ const MainTab = ({ hidden, currentSummit }) => {
             control={
               <Checkbox
                 id="is_enabled"
+                name="is_enabled"
                 checked={values.is_enabled}
                 onChange={handleChange}
               />
@@ -65,6 +67,7 @@ const MainTab = ({ hidden, currentSummit }) => {
             control={
               <Checkbox
                 id="is_hidden"
+                name="is_hidden"
                 checked={values.is_hidden}
                 onChange={handleChange}
               />
@@ -77,6 +80,7 @@ const MainTab = ({ hidden, currentSummit }) => {
             control={
               <Checkbox
                 id="allow_proposed_schedules"
+                name="allow_proposed_schedules"
                 checked={values.allow_proposed_schedules}
                 onChange={handleChange}
               />
@@ -89,6 +93,7 @@ const MainTab = ({ hidden, currentSummit }) => {
             control={
               <Checkbox
                 id="allow_new_presentations"
+                name="allow_new_presentations"
                 checked={values.allow_new_presentations}
                 onChange={handleChange}
               />
@@ -124,6 +129,7 @@ const MainTab = ({ hidden, currentSummit }) => {
           <label>{T.translate("edit_selection_plan.max_submissions")}</label>
           <TextField
             id="max_submission_allowed_per_user"
+            name="max_submission_allowed_per_user"
             type="number"
             fullWidth
             size="small"
diff --git a/src/components/forms/selection-plan-form/track-chair-settings-tab.js b/src/components/forms/selection-plan-form/track-chair-settings-tab.js
index 9c4b492b7..9784cde0f 100644
--- a/src/components/forms/selection-plan-form/track-chair-settings-tab.js
+++ b/src/components/forms/selection-plan-form/track-chair-settings-tab.js
@@ -44,6 +44,7 @@ const TrackChairSettingsTab = ({
           control={
             <Checkbox
               id="allow_track_change_requests"
+              name="allow_track_change_requests"
               checked={values.allow_track_change_requests}
               onChange={handleChange}
             />
diff --git a/src/hooks/__tests__/useScrollToError.test.js b/src/hooks/__tests__/useScrollToError.test.js
index c31091779..a47ce5043 100644
--- a/src/hooks/__tests__/useScrollToError.test.js
+++ b/src/hooks/__tests__/useScrollToError.test.js
@@ -52,10 +52,10 @@ const TabbedHarness = ({ onActiveTabChange }) => {
 
   return (
     <form onSubmit={formik.handleSubmit}>
-      <div data-tab-value="a" hidden={activeTab !== "a"}>
+      <div role="tabpanel" id="tabpanel-a" hidden={activeTab !== "a"}>
         <input name="name" onChange={formik.handleChange} />
       </div>
-      <div data-tab-value="b" hidden={activeTab !== "b"} />
+      <div role="tabpanel" id="tabpanel-b" hidden={activeTab !== "b"} />
       <button type="submit">save</button>
     </form>
   );
diff --git a/src/hooks/useScrollToError.js b/src/hooks/useScrollToError.js
index bbb591cc5..d218640bd 100644
--- a/src/hooks/useScrollToError.js
+++ b/src/hooks/useScrollToError.js
@@ -98,7 +98,9 @@ const useScrollToError = (formik, relative = false, setActiveTab) => {
 
     // Every matched field is hidden: jump to the tab that owns the first
     // errored field, then defer the scroll until it's actually visible.
-    const tabValue = matches[0].closest("[data-tab-value]")?.dataset.tabValue;
+    // Tab panels are identified by the `id="tabpanel-<value>"` convention.
+    const panelId = matches[0].closest("[role=\"tabpanel\"]")?.id;
+    const tabValue = panelId?.match(/^tabpanel-(.+)$/)?.[1];
 
     if (!tabValue) {
       scrollToFirstVisible(); // not inside a tagged tab panel, fall back
diff --git a/src/pages/events/components/__tests__/event-type-dialog.test.js b/src/pages/events/components/__tests__/event-type-dialog.test.js
index 1ae1e8406..2fc1e60bc 100644
--- a/src/pages/events/components/__tests__/event-type-dialog.test.js
+++ b/src/pages/events/components/__tests__/event-type-dialog.test.js
@@ -163,11 +163,9 @@ describe("EventTypeDialog", () => {
   it("tags both tabpanels with their owning tab value", () => {
     renderDialog();
 
+    expect(document.getElementById("tabpanel-main")).toBeInTheDocument();
     expect(
-      document.querySelector("[data-tab-value=\"main\"]")
-    ).toBeInTheDocument();
-    expect(
-      document.querySelector("[data-tab-value=\"schedule_settings\"]")
+      document.getElementById("tabpanel-schedule_settings")
     ).toBeInTheDocument();
   });
 
diff --git a/src/pages/events/components/event-type-dialog.js b/src/pages/events/components/event-type-dialog.js
index d7b50dce0..ba910678c 100644
--- a/src/pages/events/components/event-type-dialog.js
+++ b/src/pages/events/components/event-type-dialog.js
@@ -250,8 +250,8 @@ const EventTypeDialog = ({
 
             <div
               role="tabpanel"
+              id="tabpanel-main"
               hidden={activeTab !== "main"}
-              data-tab-value="main"
             >
               <Grid2 container spacing={2} sx={{ mb: 2 }}>
                 <Grid2 size={{ xs: 12, md: 4 }}>
@@ -583,8 +583,8 @@ const EventTypeDialog = ({
 
             <div
               role="tabpanel"
+              id="tabpanel-schedule_settings"
               hidden={activeTab !== "schedule_settings"}
-              data-tab-value="schedule_settings"
             >
               <Grid2 container spacing={2}>
                 <Grid2 size={12} sx={{ mt: "8px" }}>