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:
parent
1336ae0772
commit
6a1f1857e4
1 changed files with 108 additions and 102 deletions
|
|
@ -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],
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue