tbleckert / react-select-search

⚡️ Lightweight select component for React
https://react-select-search.com
MIT License
674 stars 149 forks source link

After Search, selection of results doesnt work show the chosen items #220

Open no-1ne opened 2 years ago

no-1ne commented 2 years ago

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:

  1. Go to https://react-select-search.com/?path=/story/single-select--search
  2. Search for anything
  3. Pick an item in the filtered results
  4. See error

Expected behavior it should show selected option

Screenshots image

Desktop (please complete the following information): Chrome 94 Desktop(chromeOS)

AdamElhawary commented 2 years ago

I solved this using if (document.activeElement) { (document.activeElement as HTMLElement).blur(); }

otienog1 commented 2 years ago

I have experienced the same bug.

mmv93 commented 2 years ago

Same bug for me. Downgraded to 2.x version

dolby360 commented 2 years ago

I have the same issue

dolby360 commented 2 years ago

I solved this using if (document.activeElement) { (document.activeElement as HTMLElement).blur(); }

I'm not sure how it should work on react

charles-aguiar commented 2 years ago

I have experienced the same bug.

charles-aguiar commented 2 years ago

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}
    />
)

};`

Gr1mdrag0n commented 2 years ago

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.