focus for object input

storybookjs · Sep 14, 2024 · e39a13d · e39a13d
1 parent 209d707
commit e39a13d
Showing 1 changed file with 12 additions and 2 deletions.
diff --git 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)}
     />
   );
 };