From 068efff9e3530aee41bb993a1a467f17d6e182b2 Mon Sep 17 00:00:00 2001
From: liuzaijiang <530604689@qq.com>
Date: Thu, 27 Jan 2022 20:35:43 +0800
Subject: [PATCH] fix(comp: radio): incomplete consideration of controlled mode

---
 packages/components/radio/demo/Group.vue |  4 ++--
 packages/components/radio/src/Radio.tsx  | 29 +++++++++++++++++-------
 2 files changed, 23 insertions(+), 10 deletions(-)

diff --git a/packages/components/radio/demo/Group.vue b/packages/components/radio/demo/Group.vue
index ffe360d7f..3b5c348f4 100644
--- a/packages/components/radio/demo/Group.vue
+++ b/packages/components/radio/demo/Group.vue
@@ -1,5 +1,5 @@
 <template>
-  <IxRadioGroup v-model:value="value" @Change="onChang">
+  <IxRadioGroup v-model:value="value" @Change="onChange">
     <IxRadio value="a">A</IxRadio>
     <IxRadio value="b">B</IxRadio>
     <IxRadio value="c">C</IxRadio>
@@ -11,5 +11,5 @@
 import { ref } from 'vue'
 
 const value = ref('a')
-const onChang = console.log
+const onChange = console.log
 </script>
diff --git a/packages/components/radio/src/Radio.tsx b/packages/components/radio/src/Radio.tsx
index b807d1a7e..5dfc8f85d 100644
--- a/packages/components/radio/src/Radio.tsx
+++ b/packages/components/radio/src/Radio.tsx
@@ -7,7 +7,7 @@
 
 import type { RadioGroupContext } from './token'
 import type { RadioProps } from './types'
-import type { ComputedRef, StyleValue } from 'vue'
+import type { ComputedRef, Ref, StyleValue } from 'vue'
 
 import { computed, defineComponent, inject, normalizeClass, ref } from 'vue'
 
@@ -37,7 +37,11 @@ export default defineComponent({
     const isButtoned = computed(() => props.buttoned ?? radioGroup?.props.buttoned)
     const size = computed(() => props.size ?? radioGroup?.props.size ?? formContext?.size.value ?? config.size)
     const mode = computed(() => props.mode ?? radioGroup?.props.mode ?? 'default')
-    const { isChecked, isDisabled, isFocused, handleChange, handleBlur, handleFocus } = useRadio(props, radioGroup)
+    const { isChecked, isDisabled, isFocused, handleChange, handleBlur, handleFocus } = useRadio(
+      props,
+      radioGroup,
+      elementRef,
+    )
     const classes = computed(() => {
       const buttoned = isButtoned.value
       const prefixCls = mergedPrefixCls.value
@@ -92,7 +96,11 @@ export default defineComponent({
   },
 })
 
-const useRadio = (props: RadioProps, radioGroup: RadioGroupContext | null) => {
+const useRadio = (
+  props: RadioProps,
+  radioGroup: RadioGroupContext | null,
+  elementRef: Ref<HTMLInputElement | undefined>,
+) => {
   let isChecked: ComputedRef<boolean>
   let isDisabled: ComputedRef<boolean>
   const isFocused = ref(false)
@@ -114,10 +122,12 @@ const useRadio = (props: RadioProps, radioGroup: RadioGroupContext | null) => {
       accessor.markAsBlurred()
     }
     handleChange = (evt: Event) => {
-      const checked = (evt.target as HTMLInputElement).checked
-      if (checked) {
+      if (elementRef.value) {
+        const checked = (evt.target as HTMLInputElement).checked
         const value = props.value
         accessor.setValue(value)
+        // 为了保持受控模式下保持原生input状态和数据一致
+        elementRef.value.checked = false
         callEmit(props.onChange, checked)
         callEmit(groupProps.onChange, value)
       }
@@ -132,9 +142,12 @@ const useRadio = (props: RadioProps, radioGroup: RadioGroupContext | null) => {
       accessor.markAsBlurred()
     }
     handleChange = (evt: Event) => {
-      const checked = (evt.target as HTMLInputElement).checked
-      accessor.setValue(checked)
-      callEmit(props.onChange, checked)
+      if (elementRef.value) {
+        const checked = (evt.target as HTMLInputElement).checked
+        accessor.setValue(checked)
+        elementRef.value.checked = false
+        callEmit(props.onChange, checked)
+      }
     }
   }