feat: text input focus issue (#109)

* feat: storybook upgraded NO-JIRA

* feat(TextInput): trigger focus on input TET-583

.storybook/main.ts

@@ -10,6 +10,7 @@ const config: StorybookConfig = {
     '@storybook/addon-interactions',
     '@storybook/addon-styling',
     '@storybook/addon-docs',
+    '@storybook/addon-mdx-gfm',
   ],
   framework: {
     name: '@storybook/react-vite',

package.json

@@ -47,17 +47,17 @@
   "devDependencies": {
     "@commitlint/cli": "^17.7.1",
     "@commitlint/config-conventional": "^17.7.0",
-    "@storybook/addon-essentials": "^7.0.26",
-    "@storybook/addon-interactions": "^7.0.26",
-    "@storybook/addon-links": "^7.0.26",
-    "@storybook/addon-styling": "^1.3.2",
-    "@storybook/blocks": "^7.0.26",
-    "@storybook/builder-vite": "^7.0.27",
-    "@storybook/manager-api": "^7.3.2",
-    "@storybook/react": "^7.0.26",
-    "@storybook/react-vite": "^7.0.26",
-    "@storybook/testing-library": "^0.2.0",
-    "@storybook/theming": "^7.3.2",
+    "@storybook/addon-essentials": "^7.6.0",
+    "@storybook/addon-interactions": "^7.6.0",
+    "@storybook/addon-links": "^7.6.0",
+    "@storybook/addon-mdx-gfm": "^7.6.0",
+    "@storybook/addon-styling": "^1.3.7",
+    "@storybook/blocks": "^7.6.0",
+    "@storybook/manager-api": "^7.6.0",
+    "@storybook/react": "^7.6.0",
+    "@storybook/react-vite": "^7.6.0",
+    "@storybook/testing-library": "^0.2.2",
+    "@storybook/theming": "^7.6.0",
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^14.0.0",
     "@types/jest": "^29.5.2",
@@ -73,14 +73,14 @@
     "eslint-plugin-prettier": "^5.0.0",
     "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-react-refresh": "^0.4.2",
-    "eslint-plugin-storybook": "^0.6.12",
+    "eslint-plugin-storybook": "^0.6.15",
     "husky": "^8.0.3",
     "jsdom": "^22.1.0",
     "lint-staged": ">=10",
     "prettier": "^3.0.2",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "storybook": "^7.0.26",
+    "storybook": "^7.6.0",
     "styled-components": "^5.3.3",
     "typescript": "^5.1.6",
     "vite": "^4.4.2",

src/components/TextInput/TextInput.tsx

@@ -29,6 +29,7 @@ export const TextInput = forwardRef<
     const {
       containerRef,
       handleContainerClick,
+      handleContainerFocus,
       styles,
       containerProps,
       innerValue,
@@ -51,6 +52,7 @@ export const TextInput = forwardRef<
         data-testid="text-input"
         data-state={state}
         tabIndex={0}
+        onFocus={handleContainerFocus}
         {...containerProps}
       >
         {!!beforeComponent && (

src/components/TextInput/useTextInput.ts

@@ -2,6 +2,8 @@ import {
   ChangeEvent,
   ChangeEventHandler,
   MouseEventHandler,
+  FocusEvent,
+  MouseEvent,
   useCallback,
   useMemo,
   useRef,
@@ -29,15 +31,18 @@ export const useTextInput = ({
 
   const containerRef = useRef<HTMLInputElement | null>(null);
 
-  const handleContainerClick: MouseEventHandler = useCallback(
-    (e) => {
-      if (e.target === containerRef.current) {
-        const input = containerRef.current?.querySelector('input');
-        input?.focus();
-      }
-    },
-    [containerRef],
-  );
+  const triggerFocusOnInput = (
+    e: MouseEvent<HTMLDivElement> | FocusEvent<HTMLDivElement>,
+  ) => {
+    if (e.target === containerRef.current) {
+      const input = containerRef.current?.querySelector('input');
+      input?.focus();
+    }
+  };
+
+  const handleContainerClick = useCallback(triggerFocusOnInput, [containerRef]);
+
+  const handleContainerFocus = useCallback(triggerFocusOnInput, [containerRef]);
 
   const handleOnChange: ChangeEventHandler<HTMLInputElement> = useCallback(
     (e) => {
@@ -61,6 +66,7 @@ export const useTextInput = ({
     containerProps,
     containerRef,
     handleContainerClick,
+    handleContainerFocus,
     handleOnChange,
     handleOnClear,
   };