diff --git a/webapp/src/components/common/fieldEditors/ListFE/index.tsx b/webapp/src/components/common/fieldEditors/ListFE/index.tsx index 5d3048b2ec..d72fa71c81 100644 --- 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(props: ListFEProps) { // 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(props: ListFEProps) { // 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 index 8c3bd9f25b..636fcb82ea 100644 --- 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; +}