fix: text input jumps to the end of the text after writing one letter (#3090)

Fixed not being able to write in the middle of the component
This commit is contained in:
Lucas Oliveira 2024-07-30 18:34:09 -03:00 • committed by GitHub
commit 6a1f1857e4
No known key found for this signature in database
GPG key ID: B5690EEEBB952194

View file

@ -1,6 +1,7 @@
import { TEXT_FIELD_TYPES } from "@/CustomNodes/GenericNode/components/parameterComponent/constants"; import { TEXT_FIELD_TYPES } from "@/CustomNodes/GenericNode/components/parameterComponent/constants";
import { handleOnNewValueType } from "@/CustomNodes/hooks/use-handle-new-value"; import { handleOnNewValueType } from "@/CustomNodes/hooks/use-handle-new-value";
import { APIClassType, InputFieldType } from "@/types/api"; import { APIClassType, InputFieldType } from "@/types/api";
import { useMemo } from "react";
import CodeAreaComponent from "../codeAreaComponent"; import CodeAreaComponent from "../codeAreaComponent";
import DictComponent from "../dictComponent"; import DictComponent from "../dictComponent";
import FloatComponent from "../floatComponent"; import FloatComponent from "../floatComponent";
@ -44,107 +45,112 @@ export function ParameterRenderComponent({
templateData.name templateData.name
).toLowerCase(); ).toLowerCase();
return ( return useMemo(
<RefreshParameterComponent () => (
templateData={templateData} <RefreshParameterComponent
disabled={disabled} templateData={templateData}
nodeId={nodeId} disabled={disabled}
editNode={editNode} nodeId={nodeId}
nodeClass={nodeClass} editNode={editNode}
handleNodeClass={handleNodeClass} nodeClass={nodeClass}
name={name} handleNodeClass={handleNodeClass}
> name={name}
{TEXT_FIELD_TYPES.includes(templateData.type ?? "") ? ( >
<StrRenderComponent {TEXT_FIELD_TYPES.includes(templateData.type ?? "") ? (
templateData={templateData} <StrRenderComponent
value={templateValue} templateData={templateData}
name={name} value={templateValue}
disabled={disabled} name={name}
handleOnNewValue={handleOnNewValue} disabled={disabled}
id={id} handleOnNewValue={handleOnNewValue}
editNode={editNode} id={id}
/> editNode={editNode}
) : templateData.type === "NestedDict" ? ( />
<DictComponent ) : templateData.type === "NestedDict" ? (
disabled={disabled} <DictComponent
editNode={editNode} disabled={disabled}
value={(templateValue || "").toString() === "{}" ? {} : templateValue} editNode={editNode}
onChange={onChange} value={
id={`dict_${id}`} (templateValue || "").toString() === "{}" ? {} : templateValue
/> }
) : templateData.type === "dict" ? ( onChange={onChange}
<KeypairListComponent id={`dict_${id}`}
disabled={disabled} />
editNode={editNode} ) : templateData.type === "dict" ? (
value={templateValue} <KeypairListComponent
onChange={onChange} disabled={disabled}
isList={templateData.list ?? false} editNode={editNode}
id={`keypair_${id}`} value={templateValue}
/> onChange={onChange}
) : templateData.type === "bool" ? ( isList={templateData.list ?? false}
<ToggleShadComponent id={`keypair_${id}`}
id={`toggle_${id}`} />
disabled={disabled} ) : templateData.type === "bool" ? (
enabled={templateValue} <ToggleShadComponent
setEnabled={onChange} id={`toggle_${id}`}
size={editNode ? "small" : "large"} disabled={disabled}
/> enabled={templateValue}
) : templateData.type === "float" ? ( setEnabled={onChange}
<FloatComponent size={editNode ? "small" : "large"}
disabled={disabled} />
editNode={editNode} ) : templateData.type === "float" ? (
rangeSpec={templateData.range_spec} <FloatComponent
value={templateValue ?? ""} disabled={disabled}
onChange={onChange} editNode={editNode}
id={`float_${id}`} rangeSpec={templateData.range_spec}
/> value={templateValue ?? ""}
) : templateData.type === "int" ? ( onChange={onChange}
<IntComponent id={`float_${id}`}
rangeSpec={templateData.range_spec} />
id={`int_${id}`} ) : templateData.type === "int" ? (
disabled={disabled} <IntComponent
editNode={editNode} rangeSpec={templateData.range_spec}
value={templateValue ?? ""} id={`int_${id}`}
onChange={onChange} disabled={disabled}
/> editNode={editNode}
) : templateData.type === "file" ? ( value={templateValue ?? ""}
<InputFileComponent onChange={onChange}
editNode={editNode} />
disabled={disabled} ) : templateData.type === "file" ? (
value={templateValue ?? ""} <InputFileComponent
handleOnNewValue={handleOnNewValue} editNode={editNode}
fileTypes={templateData.fileTypes} disabled={disabled}
id={`inputfile_${id}`} value={templateValue ?? ""}
/> handleOnNewValue={handleOnNewValue}
) : templateData.type === "prompt" ? ( fileTypes={templateData.fileTypes}
<PromptAreaComponent id={`inputfile_${id}`}
readonly={nodeClass.flow ? true : false} />
field_name={name} ) : templateData.type === "prompt" ? (
editNode={editNode} <PromptAreaComponent
disabled={disabled} readonly={nodeClass.flow ? true : false}
nodeClass={nodeClass} field_name={name}
setNodeClass={handleNodeClass} editNode={editNode}
value={templateValue ?? ""} disabled={disabled}
onChange={onChange} nodeClass={nodeClass}
id={`promptarea_${id}`} setNodeClass={handleNodeClass}
/> value={templateValue ?? ""}
) : templateData.type === "code" ? ( onChange={onChange}
<CodeAreaComponent id={`promptarea_${id}`}
readonly={nodeClass.flow && templateData.dynamic ? true : false} />
dynamic={templateData.dynamic ?? false} ) : templateData.type === "code" ? (
setNodeClass={handleNodeClass} <CodeAreaComponent
nodeClass={nodeClass} readonly={nodeClass.flow && templateData.dynamic ? true : false}
disabled={disabled} dynamic={templateData.dynamic ?? false}
editNode={editNode} setNodeClass={handleNodeClass}
value={templateValue ?? ""} nodeClass={nodeClass}
onChange={onChange} disabled={disabled}
id={`codearea_${id}`} editNode={editNode}
/> value={templateValue ?? ""}
) : templateData.type === "Any" ? ( onChange={onChange}
<>-</> id={`codearea_${id}`}
) : ( />
String(templateValue) ) : templateData.type === "Any" ? (
)} <>-</>
</RefreshParameterComponent> ) : (
String(templateValue)
)}
</RefreshParameterComponent>
),
[templateData, disabled, nodeId, editNode, nodeClass, name, templateValue],
); );
} }