diff --git a/package.json b/package.json
index 5245ac019..eea9f3df2 100644
--- a/package.json
+++ b/package.json
@@ -93,7 +93,7 @@
     "moment-duration-format": "^2.3.2",
     "moment-timezone": "^0.5.33",
     "mui-color-input": "^9.0.0",
-    "openstack-uicore-foundation": "5.0.56",
+    "openstack-uicore-foundation": "5.0.60-beta.0",
     "p-limit": "^6.1.0",
     "path-browserify": "^1.0.1",
     "postcss-loader": "^6.2.1",
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/cfp-settings-tab.js b/src/components/forms/selection-plan-form/cfp-settings-tab.js
index d8a5e6675..d06f28a34 100644
--- a/src/components/forms/selection-plan-form/cfp-settings-tab.js
+++ b/src/components/forms/selection-plan-form/cfp-settings-tab.js
@@ -95,6 +95,7 @@ const CfpSettingsTab = ({ hidden, currentSummit }) => {
             </label>
             <TextEditorV3
               id="cfp_presentation_edition_custom_message"
+              name="cfp_presentation_edition_custom_message"
               error={hasErrors("cfp_presentation_edition_custom_message")}
               onChange={handleChange}
               value={ms.cfp_presentation_edition_custom_message?.value || ""}
@@ -255,6 +256,7 @@ const CfpSettingsTab = ({ hidden, currentSummit }) => {
               </label>
               <TextField
                 id={field}
+                name={field}
                 fullWidth
                 size="small"
                 error={!!hasErrors(field)}
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..5aecf6093 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"
@@ -200,6 +206,7 @@ const MainTab = ({ hidden, currentSummit }) => {
           </label>
           <TextEditorV3
             id="submission_period_disclaimer"
+            name="submission_period_disclaimer"
             value={values.submission_period_disclaimer}
             onChange={handleChange}
             error={hasErrors("submission_period_disclaimer")}
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/components/inputs/email-template-input.js b/src/components/inputs/email-template-input.js
index 87f4871bd..d0be2e9eb 100644
--- a/src/components/inputs/email-template-input.js
+++ b/src/components/inputs/email-template-input.js
@@ -9,7 +9,7 @@
  * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  * See the License for the specific language governing permissions and
  * limitations under the License.
- **/
+ * */
 
 import React from "react";
 import AsyncSelect from "react-select/lib/Async";
@@ -67,7 +67,7 @@ export default class EmailTemplateInput extends React.Component {
   }
 
   render() {
-    const { error, value, onChange, id, multi, plainValue, ...rest } =
+    const { error, value, onChange, id, name, multi, plainValue, ...rest } =
       this.props;
     const has_error = this.props.hasOwnProperty("error") && error !== "";
 
@@ -77,12 +77,12 @@ export default class EmailTemplateInput extends React.Component {
 
     if (value) {
       theValue = plainValue
-        ? { value: value, label: value }
+        ? { value, label: value }
         : { value: value.id.toString(), label: value.identifier };
     }
 
     return (
-      <div>
+      <div name={name}>
         <AsyncSelect
           value={theValue}
           onChange={this.handleChange}
diff --git a/src/components/mui/formik-inputs/mui-formik-async-select.js b/src/components/mui/formik-inputs/mui-formik-async-select.js
index b574b198f..a68f1b4ff 100644
--- a/src/components/mui/formik-inputs/mui-formik-async-select.js
+++ b/src/components/mui/formik-inputs/mui-formik-async-select.js
@@ -120,6 +120,7 @@ const MuiFormikAsyncAutocomplete = ({
       renderInput={(params) => (
         <TextField
           {...params}
+          name={name}
           placeholder={placeholder}
           variant="outlined"
           error={Boolean(error)}
diff --git a/src/hooks/__tests__/useScrollToError.test.js b/src/hooks/__tests__/useScrollToError.test.js
new file mode 100644
index 000000000..1269d1c85
--- /dev/null
+++ b/src/hooks/__tests__/useScrollToError.test.js
@@ -0,0 +1,241 @@
+// @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 role="tabpanel" id="tabpanel-a" hidden={activeTab !== "a"}>
+        <input name="name" onChange={formik.handleChange} />
+      </div>
+      <div role="tabpanel" id="tabpanel-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 MixedVisibilityHarness = ({ onActiveTabChange }) => {
+  const [activeTab, setActiveTab] = useState("b");
+  const formik = useFormik({
+    initialValues: { hiddenField: "", visibleField: "" },
+    validate: (values) => {
+      const errors = {};
+      if (!values.hiddenField) errors.hiddenField = "required";
+      if (!values.visibleField) errors.visibleField = "required";
+      return errors;
+    },
+    onSubmit: () => {}
+  });
+
+  useScrollToError(formik, true, (value) => {
+    setActiveTab(value);
+    onActiveTabChange?.(value);
+  });
+
+  return (
+    <form onSubmit={formik.handleSubmit}>
+      <div role="tabpanel" id="tabpanel-a" hidden={activeTab !== "a"}>
+        <input name="hiddenField" onChange={formik.handleChange} />
+      </div>
+      <div role="tabpanel" id="tabpanel-b" hidden={activeTab !== "b"}>
+        <input name="visibleField" onChange={formik.handleChange} />
+      </div>
+      <button type="submit">save</button>
+    </form>
+  );
+};
+
+const ExternalErrorHarness = ({ serverErrors, onActiveTabChange }) => {
+  const [activeTab, setActiveTab] = useState("b");
+  const formik = useFormik({
+    initialValues: { name: "ok" },
+    validate: () => ({}),
+    onSubmit: () => Promise.resolve()
+  });
+
+  // Mirrors how consumers sync server-side errors into Formik independently
+  // of the submit lifecycle (e.g. event-type-dialog.js syncing Redux errors).
+  React.useEffect(() => {
+    if (serverErrors) formik.setErrors(serverErrors);
+  }, [serverErrors]);
+
+  useScrollToError(formik, true, (value) => {
+    setActiveTab(value);
+    onActiveTabChange?.(value);
+  });
+
+  return (
+    <form onSubmit={formik.handleSubmit}>
+      <div role="tabpanel" id="tabpanel-a" hidden={activeTab !== "a"}>
+        <input
+          name="name"
+          value={formik.values.name}
+          onChange={formik.handleChange}
+        />
+      </div>
+      <div role="tabpanel" id="tabpanel-b" hidden={activeTab !== "b"} />
+      <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("scrolls to the visible field without activating the hidden field's tab when errors span both", async () => {
+    const onActiveTabChange = jest.fn();
+    render(<MixedVisibilityHarness onActiveTabChange={onActiveTabChange} />);
+
+    await act(async () => {
+      screen.getByText("save").click();
+    });
+
+    const visibleInput = document.querySelector("[name='visibleField']");
+
+    expect(onActiveTabChange).not.toHaveBeenCalled();
+    expect(window.HTMLElement.prototype.scrollIntoView).toHaveBeenCalled();
+    expect(window.HTMLElement.prototype.scrollIntoView.mock.instances[0]).toBe(
+      visibleInput
+    );
+  });
+
+  it("scrolls to errors injected after submission settles, even into an inactive panel", async () => {
+    const onActiveTabChange = jest.fn();
+    const { rerender } = render(
+      <ExternalErrorHarness
+        serverErrors={null}
+        onActiveTabChange={onActiveTabChange}
+      />
+    );
+
+    await act(async () => {
+      screen.getByText("save").click();
+    });
+    expect(window.HTMLElement.prototype.scrollIntoView).not.toHaveBeenCalled();
+
+    await act(async () => {
+      rerender(
+        <ExternalErrorHarness
+          serverErrors={{ name: "server says no" }}
+          onActiveTabChange={onActiveTabChange}
+        />
+      );
+    });
+    await flushDoubleRaf();
+
+    expect(onActiveTabChange).toHaveBeenCalledWith("a");
+    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..f25f67634 100644
--- a/src/hooks/useScrollToError.js
+++ b/src/hooks/useScrollToError.js
@@ -1,4 +1,4 @@
-import { useEffect } from "react";
+import { useEffect, useRef } from "react";
 
 // Smooth scroll for window
 function smoothScrollTo(targetScrollTop, duration) {
@@ -27,41 +27,102 @@ 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;
 
-  useEffect(() => {
-    if (isValid || errorCount === 0) return;
-
-    const elementsSorted = errorArray
-      .reduce((result, error) => {
-        const element = document.querySelector(`[name='${error}']`);
-        if (!element) return result;
+  // Prior state, so we can tell "errors just appeared" from "still correcting the same ones".
+  const prevIsSubmittingRef = useRef(isSubmitting);
+  const prevHadErrorsRef = useRef(errorCount > 0);
 
-        const rect = element.getBoundingClientRect();
-        const absoluteTop = rect.top + window.pageYOffset;
+  useEffect(() => {
+    const prevIsSubmitting = prevIsSubmittingRef.current;
+    const prevHadErrors = prevHadErrorsRef.current;
+    prevIsSubmittingRef.current = isSubmitting;
+    prevHadErrorsRef.current = errorCount > 0;
 
-        result.push({ element, top: absoluteTop });
-        return result;
-      }, [])
-      .sort((a, b) => a.top - b.top);
+    if (isValid || errorCount === 0) return;
 
-    if (elementsSorted.length === 0) return;
+    const submitJustSettled = prevIsSubmitting && !isSubmitting;
+    const errorsJustAppeared = !isSubmitting && !prevHadErrors;
+    if (!submitJustSettled && !errorsJustAppeared) return;
+
+    const scrollToFirstVisible = () => {
+      const elementsSorted = errorArray
+        .reduce((result, error) => {
+          const element = document.querySelector(`[name='${error}']`);
+          if (!element || element.offsetParent === null) 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.
+    // 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 (relative) {
-      target?.element.scrollIntoView({ behavior: "smooth", block: "center" });
-    } else {
-      smoothScrollTo(scrollToY, duration);
+    if (!tabValue) {
+      scrollToFirstVisible(); // not inside a tagged tab panel, fall back
+      return;
     }
-  }, [isSubmitting]);
+
+    setActiveTab(tabValue);
+    afterNextLayout(scrollToFirstVisible);
+  }, [isSubmitting, errorCount]);
 };
 
 export default useScrollToError;
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 9edb6eb01..c6a956023 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,25 @@ 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.getElementById("tabpanel-main")).toBeInTheDocument();
+    expect(
+      document.getElementById("tabpanel-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 8850809db..f2f15352c 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"
+              id="tabpanel-main"
+              hidden={activeTab !== "main"}
+            >
               <Grid2 container spacing={2} sx={{ mb: 2 }}>
                 <Grid2 size={{ xs: 12, md: 4 }}>
                   <InputLabel htmlFor="class_name">
@@ -600,7 +604,11 @@ const EventTypeDialog = ({
               )}
             </div>
 
-            <div role="tabpanel" hidden={activeTab !== "schedule_settings"}>
+            <div
+              role="tabpanel"
+              id="tabpanel-schedule_settings"
+              hidden={activeTab !== "schedule_settings"}
+            >
               <Grid2 container spacing={2}>
                 <Grid2 size={12} sx={{ mt: "8px" }}>
                   <MuiFormikCheckbox
diff --git a/yarn.lock b/yarn.lock
index 49830f251..8d3516c1e 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -9042,10 +9042,10 @@ open@^10.0.3:
     is-inside-container "^1.0.0"
     wsl-utils "^0.1.0"
 
-openstack-uicore-foundation@5.0.56:
-  version "5.0.56"
-  resolved "https://registry.npmjs.org/openstack-uicore-foundation/-/openstack-uicore-foundation-5.0.56.tgz#806dc75481fb136295cf3f33a2d6da6536fa62cd"
-  integrity sha512-51p1q9Emeiurni5ttDeYFmPa9q0Su1bg49HgyqZLyfBqB1JbaaNwSmyChc590WBRhKYKEdKKqF8lYoVORCWYtA==
+openstack-uicore-foundation@5.0.60-beta.0:
+  version "5.0.60-beta.0"
+  resolved "https://registry.yarnpkg.com/openstack-uicore-foundation/-/openstack-uicore-foundation-5.0.60-beta.0.tgz#4beb7ee6c85032b0da18e9c7bfc4631754897d3f"
+  integrity sha512-R1eVcKnWxDG4zcDPDcX/HOrf64hqelzWzWmNqsgQ+jgHc5jlGnw5o1eervgupxqDwBkbiMT5OZ2HSsI5ZEHkFg==
   dependencies:
     use-sync-external-store "^1.6.0"