diff --git a/src/components/shared/wizard/RenderMultiField.tsx b/src/components/shared/wizard/RenderMultiField.tsx
index 7cd94f5125..213b23a46a 100644
--- a/src/components/shared/wizard/RenderMultiField.tsx
+++ b/src/components/shared/wizard/RenderMultiField.tsx
@@ -206,27 +206,26 @@ const ShowValue = ({
showCheck,
onBlur,
}: {
- setEditMode: (e: boolean) => void
+ setEditMode: (e: boolean) => void
form: FieldProps["form"]
field: FieldProps["field"]
showCheck: boolean,
onBlur: () => void
}) => {
return (
-
setEditMode(true)}
- onFocus={() => setEditMode(true)} // <-- activate edit mode on focus
- onKeyDown={e => {
- if (e.key === "Enter" || e.key === " ") {
- setEditMode(true);
- e.preventDefault();
- }
- }}
-
- onBlur={onBlur}
- className="show-edit"
- >
+
setEditMode(true)}
+ onFocus={() => setEditMode(true)} // <-- activate edit mode on focus
+ onKeyDown={e => {
+ if (e.key === "Enter" || e.key === " ") {
+ setEditMode(true);
+ e.preventDefault();
+ }
+ }}
+ onBlur={onBlur}
+ className="show-edit"
+ >
{field.value instanceof Array && field.value.length !== 0 ? (
{field.value.map((item, key) => (
diff --git a/src/hooks/wizardHooks.ts b/src/hooks/wizardHooks.ts
index d986eee686..43555a302b 100644
--- a/src/hooks/wizardHooks.ts
+++ b/src/hooks/wizardHooks.ts
@@ -113,16 +113,24 @@ export const useClickOutsideField = (
childRef.current.focus();
}
- const handleBlur = (e: FocusEvent) => {
- // Check if blur moves to an element outside childRef
- if (childRef.current && !childRef.current.contains(e.relatedTarget as Node)) {
- setEditMode(false);
- }
- };
-
- if (childRef.current) {
- childRef.current.addEventListener("blur", handleBlur, true); // capture phase
- }
+ /* TODO: Fix handleBlur
+ This is supposed to handle blur for tab navigation, which it does.
+ But it also triggers on mouse clicks that are inside the field, causing
+ unintended blurs and sometimes other elements besides the input element
+ to not work. A proper fix should properly set edit mode to false when the
+ field is left via keyboard navigation, but not set edit mode to false when
+ the user is clicking inside of the field.
+ */
+ // const handleBlur = (e: FocusEvent) => {
+ // // Check if blur moves to an element outside childRef
+ // if (childRef.current && !childRef.current.contains(e.relatedTarget as Node)) {
+ // setEditMode(false);
+ // }
+ // };
+
+ // if (childRef.current) {
+ // childRef.current.addEventListener("blur", handleBlur, true); // capture phase
+ // }
// Adding event listener for detecting click outside
window.addEventListener("mousedown", handleClickOutside);