fix(radio): click event will be triggered twice, closes #1680

tusen-ai · Dec 12, 2021 · f725ee8 · f725ee8
1 parent f15a1b3
commit f725ee8
Show file tree

Hide file tree

Showing 7 changed files with 27 additions and 47 deletions.
diff --git a/CHANGELOG.en-US.md b/CHANGELOG.en-US.md
@@ -17,6 +17,7 @@
 - Fix `n-avatar` `color` prop not working.
 - Fix `n-avatar`'s inner icon has wrong size.
 - Fix `n-image` lacks scoped style's scope-id, closes [#1788](https://github.com/TuSimple/naive-ui/issues/1788).
+- Fix `n-radio` click event will be triggered twice, closes [#1680](https://github.com/TuSimple/naive-ui/issues/1680).
 
 ### Feats
 

diff --git a/CHANGELOG.zh-CN.md b/CHANGELOG.zh-CN.md
@@ -17,6 +17,7 @@
 - 修复 `n-avatar` `color` 属性不生效
 - 修复 `n-avatar` 内部图标尺寸不正确
 - 修复 `n-image` 缺少 scoped style 的 scope-id，关闭 [#1788](https://github.com/TuSimple/naive-ui/issues/1788)
+- 修复 `n-radio` 的点击事件会被触发两次，关闭 [#1680](https://github.com/TuSimple/naive-ui/issues/1680)
 
 ### Feats
 

diff --git a/src/radio/src/Radio.tsx b/src/radio/src/Radio.tsx
@@ -72,7 +72,7 @@ export default defineComponent({
   render () {
     const { $slots, mergedClsPrefix } = this
     return (
-      <div
+      <label
         class={[
           `${mergedClsPrefix}-radio`,
           {
@@ -82,14 +82,11 @@ export default defineComponent({
           }
         ]}
         style={this.cssVars as CSSProperties}
-        onKeyup={this.handleKeyUp}
-        onClick={this.handleClick}
-        onMousedown={this.handleMouseDown}
       >
         <input
           ref="inputRef"
           type="radio"
-          class={`${mergedClsPrefix}-radio__radio-input`}
+          class={`${mergedClsPrefix}-radio-input`}
           value={this.value}
           name={this.mergedName}
           checked={this.renderSafeChecked}
@@ -109,7 +106,7 @@ export default defineComponent({
             {$slots.default()}
           </div>
         ) : null}
-      </div>
+      </label>
     )
   }
 })
diff --git a/src/radio/src/RadioButton.tsx b/src/radio/src/RadioButton.tsx
@@ -13,24 +13,21 @@ export default defineComponent({
   render () {
     const { mergedClsPrefix } = this
     return (
-      <div
+      <label
         class={[
           `${mergedClsPrefix}-radio-button`,
           {
             [`${mergedClsPrefix}-radio-button--disabled`]: this.mergedDisabled,
-            [`${mergedClsPrefix}-radio-button--checked`]: this
-              .renderSafeChecked,
+            [`${mergedClsPrefix}-radio-button--checked`]:
+              this.renderSafeChecked,
             [`${mergedClsPrefix}-radio-button--focus`]: this.focus
           }
         ]}
-        onKeyup={this.handleKeyUp}
-        onClick={this.handleClick}
-        onMousedown={this.handleMouseDown}
       >
         <input
           ref="inputRef"
           type="radio"
-          class={`${mergedClsPrefix}-radio-button__radio-input`}
+          class={`${mergedClsPrefix}-radio-input`}
           value={this.value}
           name={this.mergedName}
           checked={this.renderSafeChecked}
@@ -41,7 +38,7 @@ export default defineComponent({
         />
         <div class={`${mergedClsPrefix}-radio-button__state-border`} />
         <span ref="labelRef">{this.$slots}</span>
-      </div>
+      </label>
     )
   }
 })
diff --git a/src/radio/src/styles/radio-group.cssr.ts b/src/radio/src/styles/radio-group.cssr.ts
@@ -58,12 +58,16 @@ export default cB('radio-group', `
     border-top: 1px solid var(--button-border-color);
     border-bottom: 1px solid var(--button-border-color);
   `, [
-    cE('radio-input', `
+    cB('radio-input', `
+      position: absolute;
       border: 0;
-      width: 0;
-      height: 0;
+      border-radius: inherit;
+      left: 0;
+      right: 0;
+      top: 0;
+      bottom: 0;
       opacity: 0;
-      margin: 0;
+      z-index: 1;
     `),
     cE('state-border', `
       pointer-events: none;

diff --git a/src/radio/src/styles/radio.cssr.ts b/src/radio/src/styles/radio.cssr.ts
@@ -30,12 +30,16 @@ export default cB('radio', `
     height: var(--radio-size);
     width: var(--radio-size);
   `),
-  cE('radio-input', `
+  cB('radio-input', `
+    position: absolute;
     border: 0;
-    width: 0;
-    height: 0;
+    border-radius: inherit;
+    left: 0;
+    right: 0;
+    top: 0;
+    bottom: 0;
     opacity: 0;
-    margin: 0;
+    z-index: 1;
   `),
   cE('dot', `
     background: var(--color);

diff --git a/src/radio/src/use-radio.ts b/src/radio/src/use-radio.ts
@@ -75,9 +75,6 @@ export interface UseRadio {
   handleRadioInputChange: () => void
   handleRadioInputBlur: () => void
   handleRadioInputFocus: () => void
-  handleKeyUp: (e: KeyboardEvent) => void
-  handleMouseDown: () => void
-  handleClick: () => void
 }
 
 function setup (props: ExtractPropTypes<typeof radioProps>): UseRadio {
@@ -155,24 +152,6 @@ function setup (props: ExtractPropTypes<typeof radioProps>): UseRadio {
   function handleRadioInputFocus (): void {
     focusRef.value = true
   }
-  function handleKeyUp (e: KeyboardEvent): void {
-    switch (e.code) {
-      case 'Enter':
-      case 'NumpadEnter':
-        inputRef.value?.click()
-    }
-  }
-  function handleMouseDown (): void {
-    if (mergedDisabledRef.value) return
-    setTimeout(() => {
-      if (!labelRef.value?.contains(document.activeElement)) {
-        inputRef.value?.focus()
-      }
-    }, 0)
-  }
-  function handleClick (): void {
-    inputRef.value?.click()
-  }
   return {
     mergedClsPrefix: NRadioGroup
       ? NRadioGroup.mergedClsPrefixRef
@@ -187,10 +166,7 @@ function setup (props: ExtractPropTypes<typeof radioProps>): UseRadio {
     mergedSize: mergedSizeRef,
     handleRadioInputChange,
     handleRadioInputBlur,
-    handleRadioInputFocus,
-    handleKeyUp,
-    handleMouseDown,
-    handleClick
+    handleRadioInputFocus
   }
 }