From 8f3ee6761b6e6144ab52e07ade10fdf5381168df Mon Sep 17 00:00:00 2001
From: AtsushiM <at.mizoue@gmail.com>
Date: Wed, 18 Sep 2024 08:33:27 +0900
Subject: [PATCH] =?UTF-8?q?fix:=20Fieldset=20>=20FormControl=E3=81=AE?=
 =?UTF-8?q?=E3=82=88=E3=81=86=E3=81=AB=E3=83=8D=E3=82=B9=E3=83=88=E3=81=97?=
 =?UTF-8?q?=E3=81=A6=E3=81=84=E3=82=8B=E5=A0=B4=E5=90=88=E4=B8=8D=E5=BF=85?=
 =?UTF-8?q?=E8=A6=81=E3=81=ABaria-labeledby=E3=81=8C=E8=A8=AD=E5=AE=9A?=
 =?UTF-8?q?=E3=81=95=E3=82=8C=E3=81=9F=E3=82=8A=E3=81=99=E3=82=8B=E3=83=90?=
 =?UTF-8?q?=E3=82=B0=E3=82=92=E4=BF=AE=E6=AD=A3?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/FormControl/FormControl.tsx    | 25 ++++++++++++++++---
 1 file changed, 22 insertions(+), 3 deletions(-)

diff --git a/packages/smarthr-ui/src/components/FormControl/FormControl.tsx b/packages/smarthr-ui/src/components/FormControl/FormControl.tsx
index 62024d831f..e4d13a32b3 100644
--- a/packages/smarthr-ui/src/components/FormControl/FormControl.tsx
+++ b/packages/smarthr-ui/src/components/FormControl/FormControl.tsx
@@ -153,6 +153,10 @@ export const ActualFormControl: React.FC<Props & ElementProps> = ({
   const statusLabelList = Array.isArray(statusLabelProps) ? statusLabelProps : [statusLabelProps]
 
   const describedbyIds = useMemo(() => {
+    if (!isRoleGroup) {
+      return ''
+    }
+
     const temp = []
 
     if (helpMessage) {
@@ -169,7 +173,14 @@ export const ActualFormControl: React.FC<Props & ElementProps> = ({
     }
 
     return temp.join(' ')
-  }, [helpMessage, exampleMessage, supplementaryMessage, errorMessages, managedHtmlFor])
+  }, [
+    isRoleGroup,
+    helpMessage,
+    exampleMessage,
+    supplementaryMessage,
+    errorMessages,
+    managedHtmlFor,
+  ])
   const actualErrorMessages = useMemo(() => {
     if (!errorMessages) {
       return []
@@ -191,6 +202,10 @@ export const ActualFormControl: React.FC<Props & ElementProps> = ({
     }, [className, dangerouslyTitleHidden, innerMargin, isRoleGroup])
 
   useEffect(() => {
+    if (isRoleGroup) {
+      return
+    }
+
     const inputWrapper = inputWrapperRef?.current
 
     if (inputWrapper) {
@@ -205,9 +220,13 @@ export const ActualFormControl: React.FC<Props & ElementProps> = ({
         input.setAttribute('id', managedHtmlFor)
       }
     }
-  }, [managedHtmlFor])
+  }, [managedHtmlFor, isRoleGroup])
 
   useEffect(() => {
+    if (isRoleGroup) {
+      return
+    }
+
     const inputWrapper = inputWrapperRef?.current
 
     if (inputWrapper) {
@@ -222,7 +241,7 @@ export const ActualFormControl: React.FC<Props & ElementProps> = ({
         input.setAttribute('aria-describedby', describedbyIds)
       }
     }
-  }, [describedbyIds])
+  }, [describedbyIds, isRoleGroup])
 
   return (
     <Stack