Merge pull request #733 from dennis531/input-field-blur

Add keyboard keys to remove focus on input fields
opencast · Jul 12, 2024 · 401825b · 401825b
2 parents a0ab426 + ce7cc7b
commit 401825b
Show file tree

Hide file tree

Showing 23 changed files with 63 additions and 22 deletions.
diff --git a/src/components/configuration/partials/wizard/BumperPage.tsx b/src/components/configuration/partials/wizard/BumperPage.tsx
@@ -2,7 +2,8 @@ import React from "react";
 import { useTranslation } from "react-i18next";
 import WizardNavigationButtons from "../../../shared/wizard/WizardNavigationButtons";
 import FileUpload from "../../../shared/wizard/FileUpload";
-import { Field, FormikProps } from "formik";
+import { FormikProps } from "formik";
+import { Field } from "../../../shared/Field";
 import Notifications from "../../../shared/Notifications";
 
 /**

diff --git a/src/components/configuration/partials/wizard/GeneralPage.tsx b/src/components/configuration/partials/wizard/GeneralPage.tsx
@@ -1,7 +1,8 @@
 import React from "react";
 import { useTranslation } from "react-i18next";
 import Notifications from "../../../shared/Notifications";
-import { Field, FormikProps } from "formik";
+import { FormikProps } from "formik";
+import { Field } from "../../../shared/Field";
 import WizardNavigationButtons from "../../../shared/wizard/WizardNavigationButtons";
 
 /**

diff --git a/src/components/configuration/partials/wizard/TitleSlidePage.tsx b/src/components/configuration/partials/wizard/TitleSlidePage.tsx
@@ -1,6 +1,7 @@
 import React from "react";
 import { useTranslation } from "react-i18next";
-import { Field, FormikProps } from "formik";
+import { FormikProps } from "formik";
+import { Field } from "../../../shared/Field";
 import WizardNavigationButtons from "../../../shared/wizard/WizardNavigationButtons";
 import FileUpload from "../../../shared/wizard/FileUpload";
 

diff --git a/src/components/configuration/partials/wizard/WatermarkPage.tsx b/src/components/configuration/partials/wizard/WatermarkPage.tsx
@@ -1,7 +1,8 @@
 import React from "react";
 import { useTranslation } from "react-i18next";
 import cn from "classnames";
-import { Field, FormikProps } from "formik";
+import { FormikProps } from "formik";
+import { Field } from "../../../shared/Field";
 import WizardNavigationButtons from "../../../shared/wizard/WizardNavigationButtons";
 import FileUpload from "../../../shared/wizard/FileUpload";
 import Notifications from "../../../shared/Notifications";

diff --git a/src/components/events/partials/ModalTabsAndPages/DetailsExtendedMetadataTab.tsx b/src/components/events/partials/ModalTabsAndPages/DetailsExtendedMetadataTab.tsx
@@ -1,6 +1,7 @@
 import React from "react";
 import { useTranslation } from "react-i18next";
-import { Field, Formik } from "formik";
+import { Formik } from "formik";
+import { Field } from "../../../shared/Field";
 import cn from "classnames";
 import _ from "lodash";
 import Notifications from "../../../shared/Notifications";

diff --git a/src/components/events/partials/ModalTabsAndPages/DetailsMetadataTab.tsx b/src/components/events/partials/ModalTabsAndPages/DetailsMetadataTab.tsx
@@ -1,6 +1,7 @@
 import React from "react";
 import { useTranslation } from "react-i18next";
-import { Field, Formik } from "formik";
+import { Formik } from "formik";
+import { Field } from "../../../shared/Field";
 import cn from "classnames";
 import _ from "lodash";
 import Notifications from "../../../shared/Notifications";

diff --git a/src/components/events/partials/ModalTabsAndPages/EditScheduledEventsEditPage.tsx b/src/components/events/partials/ModalTabsAndPages/EditScheduledEventsEditPage.tsx
@@ -1,7 +1,8 @@
 import React, { useEffect } from "react";
 import { useTranslation } from "react-i18next";
 import cn from "classnames";
-import { Field, FieldArray, FormikProps } from "formik";
+import { FieldArray, FormikProps } from "formik";
+import { Field } from "../../../shared/Field";
 import Notifications from "../../../shared/Notifications";
 import RenderField from "../../../shared/wizard/RenderField";
 import { getTimezoneOffset, hasAccess } from "../../../../utils/utils";

diff --git a/src/components/events/partials/ModalTabsAndPages/EventDetailsSchedulingTab.tsx b/src/components/events/partials/ModalTabsAndPages/EventDetailsSchedulingTab.tsx
@@ -2,7 +2,8 @@ import React, { useEffect } from "react";
 import cn from "classnames";
 import _ from "lodash";
 import { DatePicker } from "@mui/x-date-pickers/DatePicker";
-import { Field, Formik } from "formik";
+import { Formik } from "formik";
+import { Field } from "../../../shared/Field";
 import Notifications from "../../../shared/Notifications";
 import {
 	getSchedulingConflicts,

diff --git a/src/components/events/partials/ModalTabsAndPages/NewAccessPage.tsx b/src/components/events/partials/ModalTabsAndPages/NewAccessPage.tsx
@@ -10,7 +10,8 @@ import {
 	fetchAclTemplates,
 	fetchRolesWithTarget,
 } from "../../../../slices/aclSlice";
-import { Field, FieldArray } from "formik";
+import { FieldArray } from "formik";
+import { Field } from "../../../shared/Field";
 import RenderMultiField from "../../../shared/wizard/RenderMultiField";
 import { getUserInformation } from "../../../../selectors/userInfoSelectors";
 import { hasAccess } from "../../../../utils/utils";

diff --git a/src/components/events/partials/ModalTabsAndPages/NewMetadataExtendedPage.tsx b/src/components/events/partials/ModalTabsAndPages/NewMetadataExtendedPage.tsx
@@ -1,6 +1,7 @@
 import React from "react";
 import { useTranslation } from "react-i18next";
-import { Field, FormikProps } from "formik";
+import { FormikProps } from "formik";
+import { Field } from "../../../shared/Field";
 import RenderMultiField from "../../../shared/wizard/RenderMultiField";
 import RenderField from "../../../shared/wizard/RenderField";
 import WizardNavigationButtons from "../../../shared/wizard/WizardNavigationButtons";

diff --git a/src/components/events/partials/ModalTabsAndPages/NewMetadataPage.tsx b/src/components/events/partials/ModalTabsAndPages/NewMetadataPage.tsx
@@ -1,6 +1,7 @@
 import React from "react";
 import { useTranslation } from "react-i18next";
-import { Field, FormikProps } from "formik";
+import { FormikProps } from "formik";
+import { Field } from "../../../shared/Field";
 import RenderField from "../../../shared/wizard/RenderField";
 import WizardNavigationButtons from "../../../shared/wizard/WizardNavigationButtons";
 import RenderMultiField from "../../../shared/wizard/RenderMultiField";

diff --git a/src/components/events/partials/ModalTabsAndPages/NewSourcePage.tsx b/src/components/events/partials/ModalTabsAndPages/NewSourcePage.tsx
@@ -8,7 +8,8 @@ import {
 	getTimezoneOffset,
 	translateOverrideFallback,
 } from "../../../../utils/utils";
-import { Field, FieldArray, FormikProps } from "formik";
+import { FieldArray, FormikProps } from "formik";
+import { Field } from "../../../shared/Field";
 import RenderField from "../../../shared/wizard/RenderField";
 import { getRecordings } from "../../../../selectors/recordingSelectors";
 import { sourceMetadata } from "../../../../configs/sourceConfig";

diff --git a/src/components/events/partials/modals/EditMetadataEventsModal.tsx b/src/components/events/partials/modals/EditMetadataEventsModal.tsx
@@ -1,5 +1,6 @@
 import React, { useEffect, useState } from "react";
-import { Formik, Field } from "formik";
+import { Formik } from "formik";
+import { Field } from "../../../shared/Field";
 import { useTranslation } from "react-i18next";
 import { getSelectedRows } from "../../../../selectors/tableSelectors";
 import { connect } from "react-redux";

diff --git a/src/components/events/partials/wizards/RenderWorkflowConfig.tsx b/src/components/events/partials/wizards/RenderWorkflowConfig.tsx
@@ -1,6 +1,7 @@
 import React from "react";
 import { v4 as uuidv4 } from "uuid";
-import { Field, FormikProps } from "formik";
+import { FormikProps } from "formik";
+import { Field } from "../../../shared/Field";
 import {
 	getWorkflowDefById,
 } from "../../../../selectors/workflowSelectors";

diff --git a/src/components/shared/Field.tsx b/src/components/shared/Field.tsx
@@ -0,0 +1,19 @@
+import { Field as FormikField } from "formik";
+import { FieldAttributes } from "formik/dist/Field";
+
+/**
+ * Wrapper for the Formik Fields
+ */
+export const Field = (props: FieldAttributes<any>) => {
+  return (
+    <FormikField
+      {...props}
+      onKeyDown={(event: KeyboardEvent) => {
+        // Handler for basic html inputs to remove focus, if no custom component is passed
+        if (event.key === "Enter" || event.key === "Escape") {
+          (event.currentTarget as HTMLInputElement).blur();
+        }
+      }}
+    />
+  );
+};
diff --git a/src/components/shared/RegistrationModal.tsx b/src/components/shared/RegistrationModal.tsx
@@ -1,6 +1,7 @@
 import React, { useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
-import { Field, Formik } from "formik";
+import { Formik } from "formik";
+import { Field } from "./Field";
 import TermsOfUsePage from "./modals/TermsOfUsePage";
 import { countries, states } from "../../configs/adopterRegistrationConfig";
 import cn from "classnames";

diff --git a/src/components/shared/TimeSeriesStatistics.tsx b/src/components/shared/TimeSeriesStatistics.tsx
@@ -2,7 +2,8 @@ import React from "react";
 import moment from "moment";
 import { getCurrentLanguageInformation } from "../../utils/utils";
 import { DatePicker } from "@mui/x-date-pickers/DatePicker";
-import { Field, Formik } from "formik";
+import { Formik } from "formik";
+import { Field } from "./Field";
 import BarChart from "./BarChart";
 import {
 	availableCustomStatisticDataResolutions,

diff --git a/src/components/shared/modals/ResourceDetailsAccessPolicyTab.tsx b/src/components/shared/modals/ResourceDetailsAccessPolicyTab.tsx
@@ -8,7 +8,8 @@ import {
 	fetchRolesWithTarget,
 } from "../../../slices/aclSlice";
 import Notifications from "../Notifications";
-import { Formik, Field, FieldArray, FormikErrors } from "formik";
+import { Formik, FieldArray, FormikErrors } from "formik";
+import { Field } from "../Field";
 import { NOTIFICATION_CONTEXT } from "../../../configs/modalConfig";
 import {
 	createPolicy,

diff --git a/src/components/users/partials/wizard/AclAccessPage.tsx b/src/components/users/partials/wizard/AclAccessPage.tsx
@@ -1,7 +1,8 @@
 import React, { useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
 import cn from "classnames";
-import { Field, FieldArray, FormikProps } from "formik";
+import { FieldArray, FormikProps } from "formik";
+import { Field } from "../../../shared/Field";
 import Notifications from "../../../shared/Notifications";
 import RenderMultiField from "../../../shared/wizard/RenderMultiField";
 import {

diff --git a/src/components/users/partials/wizard/AclMetadataPage.tsx b/src/components/users/partials/wizard/AclMetadataPage.tsx
@@ -1,6 +1,7 @@
 import React from "react";
 import { useTranslation } from "react-i18next";
-import { Field, FormikProps } from "formik";
+import { FormikProps } from "formik";
+import { Field } from "../../../shared/Field";
 import WizardNavigationButtons from "../../../shared/wizard/WizardNavigationButtons";
 
 /**

diff --git a/src/components/users/partials/wizard/EditUserGeneralTab.tsx b/src/components/users/partials/wizard/EditUserGeneralTab.tsx
@@ -1,7 +1,8 @@
 import React from "react";
 import { useTranslation } from "react-i18next";
 import cn from "classnames";
-import { Field, FormikProps } from "formik";
+import { Field } from "../../../shared/Field";
+import { FormikProps } from "formik";
 
 /**
  * This component renders the general user information tab in the users details modal.

diff --git a/src/components/users/partials/wizard/GroupMetadataPage.tsx b/src/components/users/partials/wizard/GroupMetadataPage.tsx
@@ -1,7 +1,8 @@
 import React from "react";
 import WizardNavigationButtons from "../../../shared/wizard/WizardNavigationButtons";
 import { useTranslation } from "react-i18next";
-import { Field, FormikProps } from "formik";
+import { FormikProps } from "formik";
+import { Field } from "../../../shared/Field";
 
 /**
  * This component renders the metadata page for groups in the new groups wizard and group details modal

diff --git a/src/components/users/partials/wizard/NewUserGeneralTab.tsx b/src/components/users/partials/wizard/NewUserGeneralTab.tsx
@@ -1,5 +1,6 @@
 import React from "react";
-import { Field, FormikProps } from "formik";
+import { Field } from "../../../shared/Field";
+import { FormikProps } from "formik";
 import Notifications from "../../../shared/Notifications";
 import { useTranslation } from "react-i18next";
 import cn from "classnames";