Different items are getting active and selected instead of one item

Question

I have implemented a react semantic ui dropdown in a react application which is searchable. The dropdown works fine if a select any item by clicking on it. But when I select the element by search text in the drop down the element matching the search text gets the class as activeand the element at the index position of that element get the class set as selected, where as the expected behaviour is that the element with the matching text should only get both the classes active and 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>

Expected code snippet :semantic-ui-example-zd7h6

Questions seeking code help must include the shortest code necessary to reproduce it **in the question itself** preferably in a [**Stack Snippet**](https://blog.stackoverflow.com/2014/09/introducing-runnable-javascript-css-and-html-code-snippets/). See [**How to create a Minimal, Reproducible Example**](http://stackoverflow.com/help/reprex) — Paulie_D, Feb 20 '20 at 12:26
Not a separate link...the code has to be **in the question**. — Paulie_D, Feb 20 '20 at 12:31
I do not see a tabIndex in the working example. Did you try removing it? — Jamie_D, Feb 20 '20 at 13:27

score 0 · Accepted Answer · answered Feb 27 '20 at 05:29

This was a bug when using styled elements as a trigger for Popup , Modal and Sidebar in semantic-ui-react. This is a work around to fix that

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

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

Sandbox link : sandbox
Original author : layershifter

Different items are getting active and selected instead of one item

1 Answers1