Fix: validation errors in hidden tabs

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",

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} />

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) => ({

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)}

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"

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")}

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}
             />

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}

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)}