解决 Element UI 单选框组内输入框光标移动报错问题

🔍 问题背景与原因分析

业务场景如图:

报错信息:

在 el-radio-group 中混合使用 el-radio 和 el-input 组件时，输入框内使用键盘方向键会触发 TypeError: Cannot read properties of undefined 错误。这是因为：

事件冒泡冲突
el-radio-group 监听键盘方向事件（keyCode.LEFT/UP/RIGHT/DOWN），用于在单选项间导航。当输入框的方向键事件冒泡到父组件时，单选框组会错误地尝试触发相邻单选按钮的 click() 方法（但输入框无此方法）。

源码:

2. 源码逻辑缺陷

组件源码的 handleKeydown 方法默认假设所有子元素都是单选按钮。它通过 querySelectorAll 获取所有 [role=radio] 元素，并基于事件目标索引切换焦点：

javascript 复制代码

// 问题代码片段
const index = [].indexOf.call(radios, target); // target 可能是输入框
roleRadios[index].click(); // 当 target 是输入框时，index 可能无效

输入框的 keydown 事件触发此逻辑时，由于输入框不在 roleRadios 集合中，索引计算错误导致 roleRadios[index] 为 undefined。

🔧 解决方案与修复步骤

✅ 方法一：阻止输入框方向键事件冒泡（推荐）

在 el-input 上添加原生事件监听器，拦截方向键事件：

vue 复制代码

<el-radio-group v-model="radio">
  <el-radio :label="3">选项A</el-radio>
  <el-input 
    v-model="input"
    placeholder="请输入内容"
    @keydown.native="handleInputKeydown" <!-- 关键修复 -->
  ></el-input>
  <el-radio :label="6">选项B</el-radio>
</el-radio-group>

javascript 复制代码

methods: {
  handleInputKeydown(e) {
    // 37: LEFT, 38: UP, 39: RIGHT, 40: DOWN
    const arrowKeys = [37, 38, 39, 40]; 
    if (arrowKeys.includes(e.keyCode)) {
      e.stopPropagation(); // 阻止事件冒泡到 radio-group
    }
  }
}

原理解析：

@keydown.native 监听输入框的原生键盘事件（Vue 组件需 .native 访问原生事件）。
e.stopPropagation() 阻断事件向父组件传递，避免 el-radio-group 的错误处理。

⚙️ 方法二：修改组件源码（高级方案）

若需全局修复，可调整 handleKeydown 逻辑，过滤非单选元素：

javascript 复制代码

// 修改 Element UI 源码 radio-group.vue
handleKeydown(e) {
  const target = e.target;
  // 跳过非 radio 元素
  if (!target.matches('[role=radio]') && !target.matches('[type=radio]')) return; 
  
  // ...原有逻辑
}

注意：此方案需维护自定义构建版本，不推荐常规项目使用。

🌐 替代设计模式

方案一：分离输入框与单选框组

将输入框移出 el-radio-group，避免事件冲突：

vue 复制代码

<el-radio-group v-model="radio">
  <el-radio :label="3">选项A</el-radio>
  <el-radio :label="6">选项B</el-radio>
</el-radio-group>
<el-input v-model="input" placeholder="独立输入框"></el-input>

方案二：使用自定义单选框组

参考 ARIA 标准实现可访问的单选框组：

html 复制代码

<div role="radiogroup" aria-labelledby="group-label">
  <h3 id="group-label">选项组</h3>
  <div 
    role="radio" 
    tabindex="0"
    @keydown="handleCustomKeydown" <!-- 自定义键盘逻辑 -->
  >选项A</div>
  <input type="text" @keydown.stop> <!-- 输入框单独处理 -->
</div>

💡 最佳实践总结

实践建议	说明
隔离交互组件	避免在单选框组内混用输入型组件，减少事件冲突
精确事件控制	使用 `@keydown.native.stop` 限定事件范围（Vue 2 需 `.native`）
组件设计原则	复合组件应统一子元素类型，或为不同类型子项单独处理事件
键盘导航兼容性	遵循 ARIA 标准实现方向键导航（如 `aria-activedescendant`）

扩展思考 ：组件库设计时应通过 事件委托过滤 或 子组件类型注册 机制区分交互元素类型。例如 Radix Vue 的 RadioGroup 通过 <RadioGroupItem> 显式标识可操作项，从源头规避此类问题。

通过上述方案可彻底解决光标移动报错问题，同时确保组件的可访问性和键盘导航功能不受影响。推荐采用事件阻断法（方法一），兼顾便捷性与维护性。