tbleckert
After Search, selection of results doesnt work show the chosen items
Describe the bug https://react-select-search.com/?path=/story/single-select--search if we search for something and select the results, it doesnt reflect the chosen option
To Reproduce Steps to reproduce the behavior:
- Go to https://react-select-search.com/?path=/story/single-select--search
- Search for anything
- Pick an item in the filtered results
- See error
Expected behavior it should show selected option
Screenshots
Desktop (please complete the following information): Chrome 94 Desktop(chromeOS)
I solved this using if (document.activeElement) { (document.activeElement as HTMLElement).blur(); }
I solved this using if (document.activeElement) { (document.activeElement as HTMLElement).blur(); }
I'm not sure how it should work on react
What worked for me is to store the value on a state, and pass a setter to the "onChange" property. Note that this is not done at https://react-select-search.com/?path=/story/single-select--search.
`export const Search = () => { const [selected, setSelected] = useState(null);
console.log({ selected });
return (
<SelectSearch
options={countries}
search
filterOptions={fuzzySearch}
placeholder="Select your country"
value={selected}
onChange={setSelected}
/>
)
};`
I've also got the same bug. onChange doesn't seem to return any value so I can't store the value in state as a workaround.
After a bit of digging, I think this might relate to the Fuse.js version. Originally I had "fuse.js": "^6.5.3" but it seems this library uses "fuse.js": "3.4.5". I had written fuzzySearch exactly like the one in this library (but with a different threshold) but it wasn't working, downgrading fuse.js in my project seemed to fix it.
