In my React application, I have integrated a searchable Semantic UI dropdown. The issue I am encountering is that when I select an item by typing in the search field, the element matching the search text gets the class "active" and the element at the index position also receives the class "selected". However, the expected behavior is for the element with the matching text to only have both classes "active" and "selected."
Here is the JavaScript code snippet:
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;
And here is the HTML:
<div id="root"></div>
To see the expected code snippet, please visit: semantic-ui-example-zd7h6