Semantic UI React 仅含Form.Dropdown的表单回车无法提交

Semantic UI React（SUIR）的Form.Dropdown是基于自定义div结构实现的下拉交互组件，没有遵循原生HTML表单的可提交控件规范。
原生表单的回车提交触发逻辑为：当焦点落在表单内具备表单提交语义的原生元素（普通文本输入框、submit类型按钮、单选/复选框等）上时，按下回车才会触发表单绑定的onSubmit事件。而SUIR Dropdown的交互载体是自定义DOM，不存在原生控件的回车事件冒泡链路，因此会出现“点击提交按钮可正常触发逻辑、按下回车无响应”的异常。

• 基于Dropdown组件的原生事件钩子补全回车触发链路，完全不破坏组件现有交互逻辑：
  在Form.Dropdown上补充onKeyDown监听，仅在下拉面板处于关闭状态时，检测到回车按下就手动触发表单提交，避免打断下拉面板展开时的选项选中流程，示例实现代码如下：

  <Form 
    onSubmit={this.onSubmit}
  > 
    <Button type='submit'>Submit</Button> 
    <Form.Dropdown 
      fluid 
      selection 
      options={options} 
      onChange={onChange} 
      value={value}
      onKeyDown={(e) => {
        // 下拉面板展开状态下，回车属于选中选项的正常交互，不做拦截
        const isDropdownOpen = e.currentTarget.classList.contains('active');
        if (e.key === 'Enter' && !isDropdownOpen) {
          e.preventDefault();
          // 复用统一的提交逻辑，避免代码重复
          this.onSubmit(e);
        }
      }}
    />
  </Form>
  

• 交互逻辑对齐原生使用习惯：下拉面板展开时，回车默认执行选中高亮选项的操作，和原生select的交互保持一致；下拉面板关闭后，焦点停留在Dropdown上时，回车直接触发表单提交，和文本输入框的提交行为无差异。
• 无需额外修改其他原生表单元素的逻辑：SUIR Form下的原生文本输入框默认就支持回车冒泡到onSubmit的链路，不需要额外做事件拦截。

• 不要在Form根节点绑定全局keydown事件拦截回车触发提交：这种粗暴实现会直接打断Dropdown展开状态下的回车选中逻辑，导致用户无法通过回车选择下拉选项，严重破坏组件交互体验。
• 不要为了实现回车提交把SUIR Dropdown替换成原生<select>元素：会丢失SUIR Dropdown自带的搜索过滤、多选、远程数据加载、占位提示等能力，完全违背组件选型的初衷。

内容的提问来源于stack exchange，提问作者Dabrule