不同的项目变得活跃并被选中，而不是一个项目答案

【问题标题】：Different items are getting active and selected instead of one item不同的项目变得活跃并被选中，而不是一个项目
【发布时间】：2020-02-20 12:25:51
【问题描述】：

我在可搜索的反应应用程序中实现了反应语义 ui 下拉菜单。如果通过单击选择任何项目，则下拉菜单可以正常工作。但是，当我通过下拉列表中的搜索文本选择元素时，匹配搜索文本的元素将类设置为active，并且该元素索引位置处的元素将类设置为selected，这是预期的行为是具有匹配文本的元素应该只获得active和selected这两个类。

JS：

import React from "react";
import { Dropdown } from "semantic-ui-react";

const countryOptions = [
  { key: "af", value: "af", flag: "af", text: "Afghanistan" },
  { key: "ax", value: "ax", flag: "ax", text: "Aland Islands" },
  { key: "al", value: "al", flag: "al", text: "Albania" },
  { key: "dz", value: "dz", flag: "dz", text: "Algeria" },
  { key: "as", value: "as", flag: "as", text: "American Samoa" }
];

const DropdownExampleSearchSelection = () => (
  <Dropdown
    search
    options={countryOptions}
    open
    scrolling
    tabIndex={-1}
    wrapSelection={true}
  />
);

export default DropdownExampleSearchSelection;

HTML：

<div id="root"></div>

预期代码 sn-p :semantic-ui-example-zd7h6

【问题讨论】：

寻求代码帮助的问题必须包含重现它所需的最短代码在问题本身中最好在Stack Snippet 中。见How to create a Minimal, Reproducible Example
添加了预期行为的示例代码 sn-p。
不是单独的链接...代码必须在问题中。
已添加代码更新。
我在工作示例中没有看到 tabIndex。你试过删除它吗？

标签： html css reactjs react-redux semantic-ui-react

【解决方案1】：

当使用样式元素作为semantic-ui-react 中Popup、Modal 和Sidebar 的触发器时，这是一个bug。这是一个 work around 来解决这个问题

const ButtonWithRef = React.forwardRef((props, ref) => (
  <Ref innerRef={ref}>
    <Button {...props} />
  </Ref>
));

export const WorkingButton = styled(ButtonWithRef)`
  color: green !important;
`;

沙盒链接：sandbox
原作者：layershifter

【讨论】：