fix set initial value of KeyValueArrayControl (#11756)

This commit is contained in:
rashmi rai 2022-03-16 19:56:57 +05:30 committed by GitHub
parent e86b169ead
commit f6ba19dcb7
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 19 additions and 9 deletions

View File

@ -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}

View File

@ -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
: "", : "",