diff --git a/app/client/src/components/ads/TextInput.tsx b/app/client/src/components/ads/TextInput.tsx index 89c491792f..fb1bc94da6 100644 --- a/app/client/src/components/ads/TextInput.tsx +++ b/app/client/src/components/ads/TextInput.tsx @@ -21,6 +21,7 @@ import Icon, { IconCollection, IconName, IconSize } from "./Icon"; import { AsyncControllableInput } from "@blueprintjs/core/lib/esm/components/forms/asyncControllableInput"; import _ from "lodash"; import { replayHighlightClass } from "globalStyles/portals"; +import { useEffect } from "react"; export type InputType = "text" | "password" | "number" | "email" | "tel"; @@ -315,10 +316,19 @@ const TextInput = forwardRef( }, []); const inputStyle = useMemo( - () => boxStyles(props, validation.isValid, props.theme), - [props, validation.isValid, props.theme], + () => boxStyles(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( (el) => { const inputValue: string = trimValue @@ -357,7 +367,7 @@ const TextInput = forwardRef( const ErrorMessage = ( - {props.errorMsg ? props.errorMsg : validation.message} + {props.errorMsg ? props.errorMsg : validation?.message} ); @@ -368,7 +378,7 @@ const TextInput = forwardRef( ); - const iconColor = !validation.isValid + const iconColor = !validation?.isValid ? props.theme.colors.danger.main : props.theme.colors.textInput.icon; @@ -385,7 +395,7 @@ const TextInput = forwardRef( height={props.height || undefined} inputStyle={inputStyle} isFocused={isFocused} - isValid={validation.isValid} + isValid={validation?.isValid} noBorder={props.noBorder} value={inputValue} width={props.width || undefined} @@ -414,7 +424,7 @@ const TextInput = forwardRef( autoFocus={props.autoFocus} defaultValue={props.defaultValue} inputStyle={inputStyle} - isValid={validation.isValid} + isValid={validation?.isValid} ref={ref} type={props.dataType || "text"} {...props} @@ -429,7 +439,7 @@ const TextInput = forwardRef( readOnly={props.readOnly} rightSideComponentWidth={rightSideComponentWidth} /> - {validation.isValid && + {validation?.isValid && props.helperText && props.helperText.length > 0 && HelperMessage} diff --git a/app/client/src/components/formControls/KeyValueArrayControl.tsx b/app/client/src/components/formControls/KeyValueArrayControl.tsx index 344528adb9..107322f435 100644 --- a/app/client/src/components/formControls/KeyValueArrayControl.tsx +++ b/app/client/src/components/formControls/KeyValueArrayControl.tsx @@ -118,7 +118,7 @@ function KeyValueRow( name={keyTextFieldName} props={{ dataType: getType(extraData[0]?.dataType), - defaultValue: props.initialValue, + defaultValue: extraData[0]?.initialValue, keyFieldValidate, placeholder: props.extraData ? props.extraData[1]?.placeholderText @@ -139,7 +139,7 @@ function KeyValueRow( name={valueTextFieldName} props={{ dataType: getType(extraData[1]?.dataType), - defaultValue: props.initialValue, + defaultValue: extraData[1]?.initialValue, placeholder: props.extraData ? props.extraData[1]?.placeholderText : "",