fix set initial value of KeyValueArrayControl (#11756)
This commit is contained in:
parent
e86b169ead
commit
f6ba19dcb7
|
|
@ -21,6 +21,7 @@ import Icon, { IconCollection, IconName, IconSize } from "./Icon";
|
||||||
import { AsyncControllableInput } from "@blueprintjs/core/lib/esm/components/forms/asyncControllableInput";
|
import { AsyncControllableInput } from "@blueprintjs/core/lib/esm/components/forms/asyncControllableInput";
|
||||||
import _ from "lodash";
|
import _ from "lodash";
|
||||||
import { replayHighlightClass } from "globalStyles/portals";
|
import { replayHighlightClass } from "globalStyles/portals";
|
||||||
|
import { useEffect } from "react";
|
||||||
|
|
||||||
export type InputType = "text" | "password" | "number" | "email" | "tel";
|
export type InputType = "text" | "password" | "number" | "email" | "tel";
|
||||||
|
|
||||||
|
|
@ -315,10 +316,19 @@ const TextInput = forwardRef(
|
||||||
}, []);
|
}, []);
|
||||||
|
|
||||||
const inputStyle = useMemo(
|
const inputStyle = useMemo(
|
||||||
() => boxStyles(props, validation.isValid, props.theme),
|
() => boxStyles(props, validation?.isValid, props.theme),
|
||||||
[props, validation.isValid, props.theme],
|
[props, validation?.isValid, props.theme],
|
||||||
);
|
);
|
||||||
|
|
||||||
|
// set the default value
|
||||||
|
useEffect(() => {
|
||||||
|
if (props.defaultValue) {
|
||||||
|
const inputValue = props.defaultValue;
|
||||||
|
setInputValue(inputValue);
|
||||||
|
props.onChange && props.onChange(inputValue);
|
||||||
|
}
|
||||||
|
}, [props.defaultValue]);
|
||||||
|
|
||||||
const memoizedChangeHandler = useCallback(
|
const memoizedChangeHandler = useCallback(
|
||||||
(el) => {
|
(el) => {
|
||||||
const inputValue: string = trimValue
|
const inputValue: string = trimValue
|
||||||
|
|
@ -357,7 +367,7 @@ const TextInput = forwardRef(
|
||||||
const ErrorMessage = (
|
const ErrorMessage = (
|
||||||
<MsgWrapper>
|
<MsgWrapper>
|
||||||
<Text type={TextType.P3}>
|
<Text type={TextType.P3}>
|
||||||
{props.errorMsg ? props.errorMsg : validation.message}
|
{props.errorMsg ? props.errorMsg : validation?.message}
|
||||||
</Text>
|
</Text>
|
||||||
</MsgWrapper>
|
</MsgWrapper>
|
||||||
);
|
);
|
||||||
|
|
@ -368,7 +378,7 @@ const TextInput = forwardRef(
|
||||||
</MsgWrapper>
|
</MsgWrapper>
|
||||||
);
|
);
|
||||||
|
|
||||||
const iconColor = !validation.isValid
|
const iconColor = !validation?.isValid
|
||||||
? props.theme.colors.danger.main
|
? props.theme.colors.danger.main
|
||||||
: props.theme.colors.textInput.icon;
|
: props.theme.colors.textInput.icon;
|
||||||
|
|
||||||
|
|
@ -385,7 +395,7 @@ const TextInput = forwardRef(
|
||||||
height={props.height || undefined}
|
height={props.height || undefined}
|
||||||
inputStyle={inputStyle}
|
inputStyle={inputStyle}
|
||||||
isFocused={isFocused}
|
isFocused={isFocused}
|
||||||
isValid={validation.isValid}
|
isValid={validation?.isValid}
|
||||||
noBorder={props.noBorder}
|
noBorder={props.noBorder}
|
||||||
value={inputValue}
|
value={inputValue}
|
||||||
width={props.width || undefined}
|
width={props.width || undefined}
|
||||||
|
|
@ -414,7 +424,7 @@ const TextInput = forwardRef(
|
||||||
autoFocus={props.autoFocus}
|
autoFocus={props.autoFocus}
|
||||||
defaultValue={props.defaultValue}
|
defaultValue={props.defaultValue}
|
||||||
inputStyle={inputStyle}
|
inputStyle={inputStyle}
|
||||||
isValid={validation.isValid}
|
isValid={validation?.isValid}
|
||||||
ref={ref}
|
ref={ref}
|
||||||
type={props.dataType || "text"}
|
type={props.dataType || "text"}
|
||||||
{...props}
|
{...props}
|
||||||
|
|
@ -429,7 +439,7 @@ const TextInput = forwardRef(
|
||||||
readOnly={props.readOnly}
|
readOnly={props.readOnly}
|
||||||
rightSideComponentWidth={rightSideComponentWidth}
|
rightSideComponentWidth={rightSideComponentWidth}
|
||||||
/>
|
/>
|
||||||
{validation.isValid &&
|
{validation?.isValid &&
|
||||||
props.helperText &&
|
props.helperText &&
|
||||||
props.helperText.length > 0 &&
|
props.helperText.length > 0 &&
|
||||||
HelperMessage}
|
HelperMessage}
|
||||||
|
|
|
||||||
|
|
@ -118,7 +118,7 @@ function KeyValueRow(
|
||||||
name={keyTextFieldName}
|
name={keyTextFieldName}
|
||||||
props={{
|
props={{
|
||||||
dataType: getType(extraData[0]?.dataType),
|
dataType: getType(extraData[0]?.dataType),
|
||||||
defaultValue: props.initialValue,
|
defaultValue: extraData[0]?.initialValue,
|
||||||
keyFieldValidate,
|
keyFieldValidate,
|
||||||
placeholder: props.extraData
|
placeholder: props.extraData
|
||||||
? props.extraData[1]?.placeholderText
|
? props.extraData[1]?.placeholderText
|
||||||
|
|
@ -139,7 +139,7 @@ function KeyValueRow(
|
||||||
name={valueTextFieldName}
|
name={valueTextFieldName}
|
||||||
props={{
|
props={{
|
||||||
dataType: getType(extraData[1]?.dataType),
|
dataType: getType(extraData[1]?.dataType),
|
||||||
defaultValue: props.initialValue,
|
defaultValue: extraData[1]?.initialValue,
|
||||||
placeholder: props.extraData
|
placeholder: props.extraData
|
||||||
? props.extraData[1]?.placeholderText
|
? props.extraData[1]?.placeholderText
|
||||||
: "",
|
: "",
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue
Block a user