fix: input shift on focus

Author: amars29

src/components/primitives/Input/Input.tsx

@@ -112,7 +112,12 @@ const Input = (
   }
 
   return (
-    <Stack {..._stack} {...layoutProps} ref={mergeRefs([_ref, wrapperRef])}>
+    <Stack
+      {..._stack}
+      {...layoutProps}
+      ref={mergeRefs([_ref, wrapperRef])}
+      isFocused={isFocused}
+    >
       {InputLeftElement || leftElement ? InputLeftElement || leftElement : null}
       <StyledInput
         {...inputProps}

src/components/primitives/Stack/Stack.tsx

@@ -28,6 +28,26 @@ export interface InterfaceStackProps extends InterfaceBoxProps<IStackProps> {
   direction?: ResponsiveValue<
     'column' | 'row' | 'column-reverse' | 'row-reverse'
   >;
+  /**
+   * If true, the Stack will be in hovered state.
+   */
+  isHovered?: boolean;
+  /**
+   * If true, the Stack will be focused.
+   */
+  isFocused?: boolean;
+  /**
+   * If true, the Stack will be disabled.
+   */
+  isDisabled?: boolean;
+  /**
+   * If true, the Stack will be invalid.
+   */
+  isInvalid?: boolean;
+  /**
+   * If true, prevents the value of the children from being edited. Used with FormControls.
+   */
+  isReadOnly?: boolean;
 }
 
 export type IStackProps = InterfaceStackProps | CustomProps<'Stack'>;
@@ -44,7 +64,13 @@ const Stack = ({ space, ...props }: IStackProps, ref?: any) => {
   }: any = usePropsResolution(
     'Stack',
     { ...props, size: space },
-    {},
+    {
+      isDisabled: props.isDisabled,
+      isHovered: props.isHovered,
+      isFocused: props.isFocused,
+      isInvalid: props.isInvalid,
+      isReadOnly: props.isReadOnly,
+    },
     { resolveResponsively: ['space', 'direction'] }
   );
 

src/theme/components/input.ts

@@ -37,12 +37,7 @@ const baseStyle = () => {
       style: { outline: 'none' },
       cursor: 'auto',
     },
-    _stack: {
-      flexDirection: 'row',
-      alignItems: 'center',
-      // justifyContent: 'space-between',
-      overflow: 'hidden',
-    },
+
     _input: {
       bg: 'transparent',
       flex: 1,
@@ -72,6 +67,19 @@ const baseStyle = () => {
           borderColor: 'muted.300',
         },
       },
+      _stack: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        // justifyContent: 'space-between',
+        overflow: 'hidden',
+        _focus: {
+          style: {
+            outlineWidth: '1px',
+            outlineColor: 'primary.600',
+            outlineStyle: 'solid',
+          },
+        },
+      },
     },
     _dark: {
       placeholderTextColor: 'text.600',
@@ -98,6 +106,19 @@ const baseStyle = () => {
           borderColor: 'muted.700',
         },
       },
+      _stack: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        // justifyContent: 'space-between',
+        overflow: 'hidden',
+        _focus: {
+          style: {
+            outlineWidth: '3px',
+            outlineColor: 'primary.500',
+            outlineStyle: 'solid',
+          },
+        },
+      },
     },
   };
 };
@@ -108,7 +129,6 @@ function roundedStyle(props: Record<string, any>) {
     borderRadius: 'full',
     borderWidth: '1',
     _focus: {
-      borderWidth: '2',
       bg: transparentize('primary.600', 0.1)(theme),
     },
     _invalid: {
@@ -121,7 +141,6 @@ function outlineStyle(props: Record<string, any>) {
   return {
     borderWidth: '1',
     _focus: {
-      borderWidth: '2',
       bg: transparentize('primary.600', 0.1)(theme),
     },
     _invalid: {
@@ -132,10 +151,8 @@ function outlineStyle(props: Record<string, any>) {
 function filledStyle(props: Record<string, any>) {
   const { theme } = props;
   return {
-    borderWidth: '0',
-    borderColor: 'transparent',
+    borderWidth: '1',
     _focus: {
-      borderWidth: '2',
       bg: transparentize('primary.600', 0.1)(theme),
     },
     _hover: {
@@ -149,9 +166,11 @@ function filledStyle(props: Record<string, any>) {
     },
     _light: {
       bg: 'muted.100',
+      borderColor: 'muted.100',
     },
     _dark: {
       bg: 'muted.800',
+      borderColor: 'muted.800',
     },
   };
 }
@@ -167,16 +186,27 @@ function unstyledStyle() {
     _focus: {
       bg: 'transparent',
     },
+    _stack: {
+      _focus: {
+        style: {
+          outlineWidth: '0',
+        },
+      },
+    },
   };
 }
 function underlinedStyle() {
   return {
     borderWidth: '0',
     pl: '0',
     borderBottomWidth: '1',
-    _focus: {
-      borderBottomWidth: '2',
-      fontWeight: '500',
+    _stack: {
+      _focus: {
+        style: {
+          outlineWidth: '0',
+          boxShadow: '0 1px 0 0 #0891B2',
+        },
+      },
     },
     _invalid: {
       borderBottomWidth: '2',