fix: prevent Enter from submitting MUI forms using uicore MuiForm

package.json

@@ -95,7 +95,7 @@
     "moment-duration-format": "^2.3.2",
     "moment-timezone": "^0.5.33",
     "mui-color-input": "^9.0.0",
-    "openstack-uicore-foundation": "5.0.73-beta.1",
+    "openstack-uicore-foundation": "5.0.74",
     "p-limit": "^6.1.0",
     "path-browserify": "^1.0.1",
     "postcss-loader": "^6.2.1",

src/components/filters/saved-views/components/save-view-dialog/index.js

@@ -16,10 +16,10 @@ import PropTypes from "prop-types";
 import T from "i18n-react/dist/i18n-react";
 import { FormikProvider, useFormik } from "formik";
 import * as yup from "yup";
-import { Box } from "@mui/material";
 import MuiFormikTextField from "openstack-uicore-foundation/lib/components/mui/formik-inputs/textfield";
 import MuiFormikRadioGroup from "openstack-uicore-foundation/lib/components/mui/formik-inputs/radio-group";
 import CustomDialog from "openstack-uicore-foundation/lib/components/mui/custom-dialog";
+import MuiForm from "openstack-uicore-foundation/lib/components/mui/form";
 import { requiredStringValidation } from "../../../../../utils/yup";
 import {
   VISIBILITY_OPTION_EVERYONE,
@@ -63,17 +63,7 @@ const SaveViewDialog = ({ selectedView, onSave, onClose }) => {
       }}
     >
       <FormikProvider value={formik}>
-        {/* keeps Enter in the name field submitting */}
-        <Box
-          component="form"
-          onSubmit={(ev) => {
-            ev.preventDefault();
-            if (formik.isSubmitting) return;
-            formik.handleSubmit(ev);
-          }}
-          noValidate
-          autoComplete="off"
-        >
+        <MuiForm onSubmit={formik.handleSubmit} noValidate autoComplete="off">
           <MuiFormikTextField
             name="name"
             label={T.translate("general.name")}
@@ -95,7 +85,7 @@ const SaveViewDialog = ({ selectedView, onSave, onClose }) => {
               }
             ]}
           />
-        </Box>
+        </MuiForm>
       </FormikProvider>
     </CustomDialog>
   );

src/components/forms/admin-access-form.js

@@ -15,13 +15,13 @@ import React, { useEffect } from "react";
 import { FormikProvider, useFormik } from "formik";
 import * as yup from "yup";
 import T from "i18n-react/dist/i18n-react";
-import Box from "@mui/material/Box";
 import Button from "@mui/material/Button";
 import Grid2 from "@mui/material/Grid2";
 import Typography from "@mui/material/Typography";
 import MemberInput from "openstack-uicore-foundation/lib/components/inputs/member-input";
 import SummitInput from "openstack-uicore-foundation/lib/components/inputs/summit-input";
 import MuiFormikTextField from "openstack-uicore-foundation/lib/components/mui/formik-inputs/textfield";
+import MuiForm from "openstack-uicore-foundation/lib/components/mui/form";
 import { requiredStringValidation } from "../../utils/yup";
 
 const validationSchema = yup.object().shape({
@@ -66,11 +66,7 @@ const AdminAccessForm = ({
         {entity.id ? T.translate("general.edit") : T.translate("general.add")}{" "}
         {T.translate("admin_access.admin_access")}
       </Typography>
-      <Box
-        component="form"
-        onSubmit={formik.handleSubmit}
-        sx={{ width: "100%" }}
-      >
+      <MuiForm onSubmit={formik.handleSubmit} sx={{ width: "100%" }}>
         <input type="hidden" name="id" value={formik.values.id} />
         <Grid2 container spacing={2}>
           <Grid2 size={12}>
@@ -144,7 +140,7 @@ const AdminAccessForm = ({
             </Button>
           </Grid2>
         </Grid2>
-      </Box>
+      </MuiForm>
     </FormikProvider>
   );
 };

src/components/forms/event-category-form.js

@@ -41,6 +41,7 @@ import MuiFormikTextField from "openstack-uicore-foundation/lib/components/mui/f
 import MuiFormikCheckbox from "openstack-uicore-foundation/lib/components/mui/formik-inputs/checkbox";
 import FormikTextEditor from "openstack-uicore-foundation/lib/components/mui/formik-inputs/texteditor";
 import MuiFormikAsyncAutocomplete from "openstack-uicore-foundation/lib/components/mui/formik-inputs/async-select";
+import MuiForm from "openstack-uicore-foundation/lib/components/mui/form";
 import AuditLogs from "../audit-logs";
 import MuiFormikColorField from "../mui/formik-inputs/mui-formik-color-field";
 import useScrollToError from "../../hooks/useScrollToError";
@@ -200,7 +201,7 @@ const EventCategoryForm = ({
 
   return (
     <FormikProvider value={formik}>
-      <Box component="form" onSubmit={formik.handleSubmit}>
+      <MuiForm onSubmit={formik.handleSubmit}>
         <Grid2 container spacing={2} sx={{ mb: 2 }}>
           <Grid2 size={{ xs: 12, md: 4 }}>
             <InputLabel htmlFor="name">
@@ -510,7 +511,7 @@ const EventCategoryForm = ({
             {T.translate("general.save")}
           </Button>
         </Box>
-      </Box>
+      </MuiForm>
     </FormikProvider>
   );
 };

src/components/forms/media-upload-form.js

@@ -29,6 +29,7 @@ import MuiFormikTextField from "openstack-uicore-foundation/lib/components/mui/f
 import MuiFormikCheckbox from "openstack-uicore-foundation/lib/components/mui/formik-inputs/checkbox";
 import MuiFormikFilesizeField from "openstack-uicore-foundation/lib/components/mui/formik-inputs/file-size-field";
 import MuiFormikSelect from "openstack-uicore-foundation/lib/components/mui/formik-inputs/select";
+import MuiForm from "openstack-uicore-foundation/lib/components/mui/form";
 import useScrollToError from "../../hooks/useScrollToError";
 import FormikTextEditor from "../inputs/formik-text-editor";
 import { positiveNumberValidation } from "../../utils/yup";
@@ -131,11 +132,7 @@ const MediaUploadForm = ({
 
   return (
     <FormikProvider value={formik}>
-      <Box
-        id="media-upload-form"
-        component="form"
-        onSubmit={formik.handleSubmit}
-      >
+      <MuiForm id="media-upload-form" onSubmit={formik.handleSubmit}>
         <Grid2 container spacing={2} sx={{ mb: 2 }}>
           <Grid2 size={12}>
             <InputLabel htmlFor="name">
@@ -335,7 +332,7 @@ const MediaUploadForm = ({
             {T.translate("general.save")}
           </Button>
         </Box>
-      </Box>
+      </MuiForm>
     </FormikProvider>
   );
 };

src/components/forms/schedule-settings-form/index.js

@@ -27,6 +27,7 @@ import MuiFormikTextField from "openstack-uicore-foundation/lib/components/mui/f
 import MuiFormikSwitch from "openstack-uicore-foundation/lib/components/mui/formik-inputs/switch";
 import MuiFormikSelect from "openstack-uicore-foundation/lib/components/mui/formik-inputs/select";
 import MuiTableSortable from "openstack-uicore-foundation/lib/components/mui/sortable-table";
+import MuiForm from "openstack-uicore-foundation/lib/components/mui/form";
 import { FILTER_TYPES } from "../../../actions/schedule-settings-actions";
 import useScrollToError from "../../../hooks/useScrollToError";
 import EditLabelSlider from "../../inputs/edit-label-slider";
@@ -151,7 +152,7 @@ const ScheduleSettingsForm = ({ entity, summit, errors, onSubmit }) => {
 
   return (
     <FormikProvider value={formik}>
-      <Box component="form" onSubmit={formik.handleSubmit}>
+      <MuiForm onSubmit={formik.handleSubmit}>
         <Grid2 container spacing={2} sx={{ mb: 2 }}>
           <Grid2 size={{ xs: 12, md: 4 }}>
             <InputLabel htmlFor="key">
@@ -260,7 +261,7 @@ const ScheduleSettingsForm = ({ entity, summit, errors, onSubmit }) => {
             {T.translate("general.save")}
           </Button>
         </Box>
-      </Box>
+      </MuiForm>
     </FormikProvider>
   );
 };

src/components/forms/selection-plan-form.js

@@ -21,6 +21,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 MuiForm from "openstack-uicore-foundation/lib/components/mui/form";
 import useScrollToError from "../../hooks/useScrollToError";
 import MainTab from "./selection-plan-form/main-tab";
 import TrackGroupsTab from "./selection-plan-form/track-groups-tab";
@@ -326,9 +327,8 @@ const SelectionPlanForm = (props) => {
 
   return (
     <FormikProvider value={formik}>
-      <Box
+      <MuiForm
         id="selection-plan-form"
-        component="form"
         className="selection-plan-form"
         onSubmit={formik.handleSubmit}
       >
@@ -428,7 +428,7 @@ const SelectionPlanForm = (props) => {
             />
           </>
         )}
-      </Box>
+      </MuiForm>
     </FormikProvider>
   );
 };

src/components/forms/sponsor-settings-form/index.js

@@ -20,6 +20,7 @@ import { epochToMomentTimeZone } from "openstack-uicore-foundation/lib/utils/met
 import MuiFormikDatepicker from "openstack-uicore-foundation/lib/components/mui/formik-inputs/datepicker";
 import MuiFormikTextField from "openstack-uicore-foundation/lib/components/mui/formik-inputs/textfield";
 import MuiFormikCheckbox from "openstack-uicore-foundation/lib/components/mui/formik-inputs/checkbox";
+import MuiForm from "openstack-uicore-foundation/lib/components/mui/form";
 import styles from "./styles.module.less";
 import {
   addEmailListValidator,
@@ -114,8 +115,7 @@ const SponsorSettingsForm = ({ settings, onSubmit, summitTZ }) => {
 
   return (
     <FormikProvider value={formik}>
-      <Box
-        component="form"
+      <MuiForm
         onSubmit={formik.handleSubmit}
         noValidate
         className={styles.formWrapper}
@@ -211,7 +211,7 @@ const SponsorSettingsForm = ({ settings, onSubmit, summitTZ }) => {
             {T.translate("general.save")}
           </Button>
         </Box>
-      </Box>
+      </MuiForm>
     </FormikProvider>
   );
 };

src/components/forms/tax-type-form.js

@@ -27,6 +27,7 @@ import Typography from "@mui/material/Typography";
 import MuiFormikTextField from "openstack-uicore-foundation/lib/components/mui/formik-inputs/textfield";
 import MuiTable from "openstack-uicore-foundation/lib/components/mui/table";
 import { queryTicketTypes } from "openstack-uicore-foundation/lib/utils/query-actions";
+import MuiForm from "openstack-uicore-foundation/lib/components/mui/form";
 import { DEFAULT_PER_PAGE } from "../../utils/constants";
 import useScrollToError from "../../hooks/useScrollToError";
 
@@ -135,12 +136,7 @@ const TaxTypeForm = ({
 
   return (
     <FormikProvider value={formik}>
-      <Box
-        component="form"
-        onSubmit={formik.handleSubmit}
-        noValidate
-        autoComplete="off"
-      >
+      <MuiForm onSubmit={formik.handleSubmit} noValidate autoComplete="off">
         <input type="hidden" name="id" value={formik.values.id} />
         <Grid2 container spacing={2} sx={{ mb: 2 }}>
           <Grid2 size={{ xs: 12, sm: 6, md: 4 }}>
@@ -235,7 +231,7 @@ const TaxTypeForm = ({
             {T.translate("general.save")}
           </Button>
         </Stack>
-      </Box>
+      </MuiForm>
     </FormikProvider>
   );
 };

src/components/mui/ClientCard/components/EditAddressDialog.jsx

@@ -16,7 +16,6 @@ import T from "i18n-react/dist/i18n-react";
 import { useFormik, FormikProvider } from "formik";
 import * as yup from "yup";
 import {
-  Box,
   Button,
   Dialog,
   DialogActions,
@@ -25,6 +24,7 @@ import {
   Grid2
 } from "@mui/material";
 import MuiFormikTextField from "openstack-uicore-foundation/lib/components/mui/formik-inputs/textfield";
+import MuiForm from "openstack-uicore-foundation/lib/components/mui/form";
 
 const EditAddressDialog = ({ open, onClose, onSubmit, address }) => {
   const formik = useFormik({
@@ -69,12 +69,7 @@ const EditAddressDialog = ({ open, onClose, onSubmit, address }) => {
     <Dialog open={open} onClose={handleClose} fullWidth maxWidth="sm">
       <DialogTitle>{T.translate("client_card.edit_address")}</DialogTitle>
       <FormikProvider value={formik}>
-        <Box
-          component="form"
-          onSubmit={formik.handleSubmit}
-          noValidate
-          autoComplete="off"
-        >
+        <MuiForm onSubmit={formik.handleSubmit} noValidate autoComplete="off">
           <DialogContent>
             <Grid2 container spacing={2}>
               <Grid2 size={12}>
@@ -135,7 +130,7 @@ const EditAddressDialog = ({ open, onClose, onSubmit, address }) => {
               {T.translate("client_card.save")}
             </Button>
           </DialogActions>
-        </Box>
+        </MuiForm>
       </FormikProvider>
     </Dialog>
   );

src/components/mui/ClientCard/components/EditClientDialog.jsx

@@ -16,7 +16,6 @@ import T from "i18n-react/dist/i18n-react";
 import { useFormik, FormikProvider } from "formik";
 import * as yup from "yup";
 import {
-  Box,
   Button,
   Dialog,
   DialogActions,
@@ -25,6 +24,7 @@ import {
   Grid2
 } from "@mui/material";
 import MuiFormikTextField from "openstack-uicore-foundation/lib/components/mui/formik-inputs/textfield";
+import MuiForm from "openstack-uicore-foundation/lib/components/mui/form";
 
 const EditClientDialog = ({ open, onClose, onSubmit, client }) => {
   const formik = useFormik({
@@ -66,12 +66,7 @@ const EditClientDialog = ({ open, onClose, onSubmit, client }) => {
     <Dialog open={open} onClose={handleClose} fullWidth maxWidth="sm">
       <DialogTitle>{T.translate("client_card.edit_client")}</DialogTitle>
       <FormikProvider value={formik}>
-        <Box
-          component="form"
-          onSubmit={formik.handleSubmit}
-          noValidate
-          autoComplete="off"
-        >
+        <MuiForm onSubmit={formik.handleSubmit} noValidate autoComplete="off">
           <DialogContent>
             <Grid2 container spacing={2}>
               <Grid2 size={6}>
@@ -116,7 +111,7 @@ const EditClientDialog = ({ open, onClose, onSubmit, client }) => {
               {T.translate("client_card.save")}
             </Button>
           </DialogActions>
-        </Box>
+        </MuiForm>
       </FormikProvider>
     </Dialog>
   );