Merge pull request #36 from cobaltinc/park/input-useId

Input 의 useId 를 react 제공 함수로 변경했다
cobaltinc · Oct 12, 2023 · 87d857f · 87d857f
2 parents 52e2f31 + 2f2a906
commit 87d857f
Show file tree

Hide file tree

Showing 2 changed files with 28 additions and 5 deletions.
diff --git a/packages/co-design-core/src/components/Input/Input.tsx b/packages/co-design-core/src/components/Input/Input.tsx
@@ -1,9 +1,8 @@
-import React, { forwardRef } from 'react';
+import React, { forwardRef, useId } from 'react';
 import { useCoTheme, CoComponentProps, CoSize, PolymorphicComponentProps, PolymorphicRef, CoRadius, ClassNames } from '@co-design/styles';
 import { View } from '../View';
 import useStyles from './Input.style';
 import { Text, TextProps } from '../Text';
-import { useId } from '@co-design/hooks';
 
 export type InputStylesNames = ClassNames<typeof useStyles>;
 
@@ -111,7 +110,7 @@ export const Input: InputComponent & { displayName?: string } = forwardRef(
     return (
       <Wrapper>
         {label && (
-          <label htmlFor={inputId} className={classes.label}>
+          <label htmlFor={inputId + name} className={classes.label}>
             <Text className={classes.labelText} {...labelTextProps}>
               {label}
             </Text>
@@ -139,7 +138,7 @@ export const Input: InputComponent & { displayName?: string } = forwardRef(
             required={required}
             disabled={disabled}
             style={{ paddingRight: rightSection ? rightSectionWidth : theme.spacing.small }}
-            id={inputId}
+            id={inputId + name}
           />
           {rightSection && (
             <div

diff --git a/packages/co-design-core/src/components/Input/stories/Input.stories.tsx b/packages/co-design-core/src/components/Input/stories/Input.stories.tsx
@@ -1,6 +1,7 @@
-import React from 'react';
+import React, { useState } from 'react';
 import { Tooltip } from '../../Tooltip';
 import { Input } from '../Input';
+import { Modal } from '../../Modal';
 
 export default {
   title: '@co-design/core/Input',
@@ -115,3 +116,26 @@ export const WithLabel = {
     );
   },
 };
+
+// Storybook Context 변경으로 인한 리렌더링으로 focus 풀림
+export const AutoFocus = {
+  render: (props) => {
+    const [opened, setOpened] = useState(false);
+    return (
+      <>
+        <div style={{ width: 400, padding: 24 }}>
+          <button
+            onClick={() => {
+              setOpened(true);
+            }}
+          >
+            open modal
+          </button>
+        </div>
+        <Modal opened={opened} onClose={() => setOpened(false)}>
+          <Input autoFocus {...props} />
+        </Modal>
+      </>
+    );
+  },
+};