diff --git a/packages/ondevice-controls/src/types/Object.tsx b/packages/ondevice-controls/src/types/Object.tsx index ea690377d1..09c13c6ce0 100644 --- a/packages/ondevice-controls/src/types/Object.tsx +++ b/packages/ondevice-controls/src/types/Object.tsx @@ -15,8 +15,8 @@ export interface ObjectProps { isPristine: boolean; } -const Input = styled(BottomSheetTextInput)(({ theme }) => ({ - ...inputStyle({ theme, isTextInput: false }), +const Input = styled(BottomSheetTextInput)<{ focused: boolean }>(({ theme, focused }) => ({ + ...inputStyle({ theme, isTextInput: false, focused }), minHeight: 60, })); @@ -30,8 +30,11 @@ const ObjectType = ({ arg, onChange, isPristine }: ObjectProps) => { }, [arg.value]); const [failed, setFailed] = useState(false); + const { key, setCurrentValue } = useResyncValue(arg.value, isPristine); + const [focused, setFocused] = useState(false); + const handleChange = (value) => { const withReplacedQuotes = value .replace(/[\u2018\u2019]/g, "'") @@ -41,7 +44,9 @@ const ObjectType = ({ arg, onChange, isPristine }: ObjectProps) => { const json = JSON.parse(withReplacedQuotes.trim()); onChange(json); + setCurrentValue(json); + setFailed(false); } catch (err) { setFailed(true); @@ -52,7 +57,9 @@ const ObjectType = ({ arg, onChange, isPristine }: ObjectProps) => { if (failed) { extraStyle.borderWidth = 1; + extraStyle.borderColor = '#fadddd'; + extraStyle.backgroundColor = '#fff5f5'; } @@ -66,6 +73,9 @@ const ObjectType = ({ arg, onChange, isPristine }: ObjectProps) => { multiline autoCapitalize="none" underlineColorAndroid="transparent" + focused={focused} + onFocus={() => setFocused(true)} + onBlur={() => setFocused(false)} /> ); };