Различные предметы становятся активными и выбираются вместо одного - PullRequest
Новая
       7

Различные предметы становятся активными и выбираются вместо одного

0 голосов
/ 20 февраля 2020

Я реализовал раскрывающийся список реагирующих семанти c в пользовательском приложении реакции, в котором можно выполнять поиск. Раскрывающийся список работает нормально, если выбрать какой-либо элемент, нажав на него. Но когда я выбираю элемент по тексту поиска в раскрывающемся списке, элемент, соответствующий тексту поиска, получает класс как 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>

Ожидаемый фрагмент кода: semanti c -ui-example-zd7h6

1 Ответ

0 голосов
/ 27 февраля 2020

Это ошибка при использовании элементов стиля в качестве триггера для Popup, Modal и Sidebar в semantic-ui-react. Это обходной путь , чтобы исправить это 

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

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

Ссылка песочницы: песочница
Автор оригинала: layerhifter

...