fix(comp: radio): incomplete consideration of controlled mode

IDuxFE · Feb 10, 2022 · cce9e9e · cce9e9e
1 parent 3001bbd
commit cce9e9e
Show file tree

Hide file tree

Showing 4 changed files with 25 additions and 12 deletions.
diff --git a/packages/components/button/style/mixin.less b/packages/components/button/style/mixin.less
@@ -104,7 +104,7 @@
   border-color: @border;
 
   > a:only-child {
-    color: currentcolor;
+    color: currentColor;
 
     &::after {
       position: absolute;

diff --git a/packages/components/icon/style/index.less b/packages/components/icon/style/index.less
@@ -14,7 +14,7 @@
   > svg {
     width: 1em;
     height: 1em;
-    fill: currentcolor;
+    fill: currentColor;
   }
 
   &-loading,

diff --git 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
@@ -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)
+      }
     }
   }