From c4e3a43809f80ebddd068b0ca48ed833c866cf43 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=8E=8B=E5=8F=A8=E5=8F=A8?= <hi@wangdaodao.com>
Date: Fri, 24 Jun 2022 17:44:36 +0800
Subject: [PATCH] Radio: feat radio keydown is disabled

---
 examples/docs/en-US/radio.md       | 1 +
 examples/docs/es/radio.md          | 1 +
 examples/docs/fr-FR/radio.md       | 1 +
 examples/docs/zh-CN/radio.md       | 1 +
 packages/radio/src/radio-group.vue | 9 ++++++++-
 types/radio-group.d.ts             | 3 +++
 6 files changed, 15 insertions(+), 1 deletion(-)

diff --git a/examples/docs/en-US/radio.md b/examples/docs/en-US/radio.md
index 0cc42555c..cfaa9e735 100644
--- a/examples/docs/en-US/radio.md
+++ b/examples/docs/en-US/radio.md
@@ -178,6 +178,7 @@ Radio with button styles.
 value / v-model | binding value | string / number / boolean | — | —
 label | the value of Radio | string / number / boolean | — | —
 disabled | whether Radio is disabled | boolean | — | false
+controllable | whether keydown is disabled | boolean | — | false
 border  | whether to add a border around Radio  | boolean   | — | false
 size  | size of the Radio, only works when `border` is true  | string  | medium / small / mini | —
 name | native 'name' attribute | string    |      —         |     —
diff --git a/examples/docs/es/radio.md b/examples/docs/es/radio.md
index 1addf5ecb..e68ae1b0b 100644
--- a/examples/docs/es/radio.md
+++ b/examples/docs/es/radio.md
@@ -176,6 +176,7 @@ Radio con estilo de botón.
 | value / v-model | valor enlazado | string / number / boolean | — | — |
 | label    | el valor del Radio                       | string / number / boolean | —                     | —           |
 | disabled | si el Radio está deshabilitado           | boolean                   | —                     | false       |
+| controllable | desactivar eventos de teclado        | boolean                   | —                     | false       |
 | border   | agregar borde alrededor del elemento Radio | boolean                   | —                     | false       |
 | size     | tamaño del elemento Radio, solo funciona si `border` es verdadero | string                    | medium / small / mini | —           |
 | name     | atributo nativo `name`                 | string                    | —                     | —           |
diff --git a/examples/docs/fr-FR/radio.md b/examples/docs/fr-FR/radio.md
index 9cc07b9f9..ed2934d66 100644
--- a/examples/docs/fr-FR/radio.md
+++ b/examples/docs/fr-FR/radio.md
@@ -178,6 +178,7 @@ Des radios affichés comme des boutons standards.
 | value / v-model | La valeur liée. | string / number / boolean | — | — |
 | label | La valeur du radio. | string / number / boolean | — | — |
 | disabled | Si le radio est désactivé. | boolean | — | false |
+| controllable | Désactiver les événements du clavier. | boolean | — | false |
 | border  | Si une bordure doit être affichée autour du radio. | boolean   | — | false |
 | size  | Taille du radio, ne marche que si `border` est `true`. | string  | medium / small / mini | — |
 | name | Attribut 'name' natif. | string | — | — |
diff --git a/examples/docs/zh-CN/radio.md b/examples/docs/zh-CN/radio.md
index 02b0a8b0d..c88f226a0 100644
--- a/examples/docs/zh-CN/radio.md
+++ b/examples/docs/zh-CN/radio.md
@@ -180,6 +180,7 @@
 | value / v-model | 绑定值 | string / number / boolean | — | — |
 | label     | Radio 的 value   | string / number / boolean    |       —        |      —   |
 | disabled  | 是否禁用    | boolean   | — | false   |
+| controllable  | 是否禁用键盘事件    | boolean   | — | false   |
 | border  | 是否显示边框  | boolean   | — | false   |
 | size  | Radio 的尺寸，仅在 border 为真时有效  | string  | medium / small / mini | — |
 | name | 原生 name 属性 | string    |      —         |     —    |
diff --git a/packages/radio/src/radio-group.vue b/packages/radio/src/radio-group.vue
index 4cbc6a5c1..9eeb3e001 100644
--- a/packages/radio/src/radio-group.vue
+++ b/packages/radio/src/radio-group.vue
@@ -35,7 +35,11 @@
       size: String,
       fill: String,
       textColor: String,
-      disabled: Boolean
+      disabled: Boolean,
+      controllable: {
+        type: Boolean,
+        default: false
+      }
     },
 
     computed: {
@@ -67,6 +71,9 @@
     },
     methods: {
       handleKeydown(e) { // 左右上下按键 可以在radio组内切换不同选项
+        if (this.disabled || this.controllable) {
+          return;
+        }
         const target = e.target;
         const className = target.nodeName === 'INPUT' ? '[type=radio]' : '[role=radio]';
         const radios = this.$el.querySelectorAll(className);
diff --git a/types/radio-group.d.ts b/types/radio-group.d.ts
index f61144b65..ec4ccce67 100644
--- a/types/radio-group.d.ts
+++ b/types/radio-group.d.ts
@@ -13,6 +13,9 @@ export declare class ElRadioGroup extends ElementUIComponent {
   /** Whether the nesting radios are disabled */
   disabled: boolean
 
+  /** Whether Keydown Event is disabled  */
+  controllable: boolean
+
   /** Font color when button is active */
   textColor: string
 }