From e39a13dbb7fd42f952183e26a82798ce4f3047ec Mon Sep 17 00:00:00 2001
From: Daniel Williams <dannyhyunsoowilliams@gmail.com>
Date: Sat, 14 Sep 2024 17:25:41 +0100
Subject: [PATCH] focus for object input

---
 packages/ondevice-controls/src/types/Object.tsx | 14 ++++++++++++--
 1 file changed, 12 insertions(+), 2 deletions(-)

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)}
     />
   );
 };