不同的项目被激活并被选中，而不是一个项目

Question

我在一个可搜索的 React 应用程序中实现了一个 React 语义 ui 下拉菜单。如果通过单击 select 任何项目，下拉列表工作正常。但是当我 select 下拉列表中搜索文本的元素时，与搜索文本匹配的元素将 class 作为 active 并且该元素索引位置的元素将获得 class 设置为 selected，其中预期的行为是具有匹配文本的元素应该只同时获得 classes 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>

预期的代码片段：semantic-ui-example-zd7h6

Answer 1

这是一个 bug when using styled elements as a trigger for Popup , Modal and Sidebar in semantic-ui-react. This is a work around 来解决这个问题

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

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

沙盒 link : sandbox
原作者：layershifter

不同的项目被激活并被选中，而不是一个项目

Different items are getting active and selected instead of one item

html

css

reactjs

react-redux

semantic-ui-react