fix(ui-tablemode): create modal is frozen when submitting without col…

…umn (#1946)
AntaresSimulatorTeam · Feb 26, 2024 · a351458 · a351458
1 parent 9887787
commit a351458
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 6 deletions.
diff --git a/webapp/src/components/common/fieldEditors/ListFE/index.tsx b/webapp/src/components/common/fieldEditors/ListFE/index.tsx
@@ -34,9 +34,10 @@ import reactHookFormSupport, {
 import {
   createFakeBlurEventHandler,
   createFakeChangeEventHandler,
+  createFakeInputElement,
   FakeBlurEventHandler,
   FakeChangeEventHandler,
-  FakeHTMLInputElement,
+  InputObject,
 } from "../../../../utils/feUtils";
 import { makeLabel, makeListItems } from "./utils";
 
@@ -97,7 +98,7 @@ function ListFE<TItem, TOption>(props: ListFEProps<TItem, TOption>) {
   // Trigger event handlers
   useUpdateEffect(() => {
     if (onChange || onBlur) {
-      const fakeInputElement: FakeHTMLInputElement = {
+      const fakeInputElement: InputObject = {
         value: listItems.map((item) => item.value),
         name,
       };
@@ -108,10 +109,10 @@ function ListFE<TItem, TOption>(props: ListFEProps<TItem, TOption>) {
 
   // Set ref
   useEffect(() => {
-    const fakeInputElement: FakeHTMLInputElement = {
+    const fakeInputElement = createFakeInputElement({
       value: listItems.map((item) => item.value),
       name,
-    };
+    });
     setRef(inputRef, fakeInputElement);
   }, [inputRef, listItems, name]);
 

diff --git a/webapp/src/utils/feUtils.ts b/webapp/src/utils/feUtils.ts
@@ -1,13 +1,13 @@
 import { HTMLInputTypeAttribute } from "react";
 
-export interface FakeHTMLInputElement {
+export interface InputObject {
   value: unknown;
   checked?: boolean;
   type?: HTMLInputTypeAttribute;
   name?: string;
 }
 
-type Target = HTMLInputElement | FakeHTMLInputElement;
+type Target = HTMLInputElement | InputObject;
 
 export interface FakeChangeEventHandler {
   target: Target;
@@ -36,3 +36,11 @@ export function createFakeBlurEventHandler(
     type: "blur",
   };
 }
+
+export function createFakeInputElement(obj: InputObject): HTMLInputElement {
+  const inputElement = document.createElement("input");
+  inputElement.name = obj.name || "";
+  inputElement.value = obj.value as string;
+
+  return inputElement;
+}