From 7fc659de7e02990649d4dc49de0435b803d16dc7 Mon Sep 17 00:00:00 2001
From: 07akioni <07akioni2@gmail.com>
Date: Tue, 15 Jun 2021 18:36:29 +0800
Subject: [PATCH] fix(radio-group): doesn't trigger form item validation

---
 CHANGELOG.en-US.md           |  6 ++++++
 CHANGELOG.zh-CN.md           |  6 ++++++
 src/radio/src/RadioGroup.tsx | 32 +++++++++++++++++++++++++++++---
 3 files changed, 41 insertions(+), 3 deletions(-)

diff --git a/CHANGELOG.en-US.md b/CHANGELOG.en-US.md
index 9b0b6086b..17a0cf345 100644
--- a/CHANGELOG.en-US.md
+++ b/CHANGELOG.en-US.md
@@ -1,5 +1,11 @@
 # CHANGELOG
 
+## Pending
+
+### Fixes
+
+- Fix `n-radio-group` doesn't trigger form item validation.
+
 ## 2.11.11 (2021-06-15)
 
 ### Fixes
diff --git a/CHANGELOG.zh-CN.md b/CHANGELOG.zh-CN.md
index 470a84dee..bf277621f 100644
--- a/CHANGELOG.zh-CN.md
+++ b/CHANGELOG.zh-CN.md
@@ -1,5 +1,11 @@
 # CHANGELOG
 
+## Pending
+
+### Fixes
+
+- 修复 `n-radio-group` 不触发 form-item 验证
+
 ## 2.11.11 (2021-06-15)
 
 ### Fixes
diff --git a/src/radio/src/RadioGroup.tsx b/src/radio/src/RadioGroup.tsx
index 6c957ea9c..b30f68a6f 100644
--- a/src/radio/src/RadioGroup.tsx
+++ b/src/radio/src/RadioGroup.tsx
@@ -139,7 +139,14 @@ export default defineComponent({
   name: 'RadioGroup',
   props: radioGroupProps,
   setup (props) {
-    const formItem = useFormItem(props)
+    const selfElRef = ref<HTMLDivElement | null>(null)
+    const {
+      mergedSizeRef,
+      nTriggerFormChange,
+      nTriggerFormInput,
+      nTriggerFormBlur,
+      nTriggerFormFocus
+    } = useFormItem(props)
     const { mergedClsPrefixRef } = useConfig(props)
     const themeRef = useTheme(
       'Radio',
@@ -149,7 +156,6 @@ export default defineComponent({
       props,
       mergedClsPrefixRef
     )
-    const { mergedSizeRef } = formItem
     const uncontrolledValueRef = ref(props.defaultValue)
     const controlledValueRef = toRef(props, 'value')
     const mergedValueRef = useMergedState(
@@ -172,6 +178,20 @@ export default defineComponent({
         call(_onUpdateValue, value)
       }
       uncontrolledValueRef.value = value
+      nTriggerFormChange()
+      nTriggerFormInput()
+    }
+    function handleFocusin (e: FocusEvent): void {
+      const { value: selfEl } = selfElRef
+      if (!selfEl) return
+      if (selfEl.contains(e.relatedTarget as HTMLElement | null)) return
+      nTriggerFormFocus()
+    }
+    function handleFocusout (e: FocusEvent): void {
+      const { value: selfEl } = selfElRef
+      if (!selfEl) return
+      if (selfEl.contains(e.relatedTarget as HTMLElement | null)) return
+      nTriggerFormBlur()
     }
     provide(radioGroupInjectionKey, {
       mergedClsPrefixRef,
@@ -182,8 +202,11 @@ export default defineComponent({
       doUpdateValue
     })
     return {
+      selfElRef,
       mergedClsPrefix: mergedClsPrefixRef,
       mergedValue: mergedValueRef,
+      handleFocusout,
+      handleFocusin,
       cssVars: computed(() => {
         const { value: size } = mergedSizeRef
         const {
@@ -224,7 +247,7 @@ export default defineComponent({
     }
   },
   render () {
-    const { mergedValue, mergedClsPrefix } = this
+    const { mergedValue, mergedClsPrefix, handleFocusin, handleFocusout } = this
     const { children, isButtonGroup } = mapSlot(
       flatten(getSlot(this)),
       mergedValue,
@@ -232,6 +255,9 @@ export default defineComponent({
     )
     return (
       <div
+        onFocusin={handleFocusin}
+        onFocusout={handleFocusout}
+        ref="selfElRef"
         class={[
           `${mergedClsPrefix}-radio-group`,
           isButtonGroup && `${mergedClsPrefix}-radio-group--button-group`