Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
no-1ne opened this issue Dec 6, 2021 · 8 comments
Open

Comments

@no-1ne
Copy link

no-1ne commented Dec 6, 2021

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
Copy link

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

@otienog1
Copy link

otienog1 commented Jan 14, 2022

I have experienced the same bug.

@mmv93
Copy link

mmv93 commented Jan 14, 2022

Same bug for me. Downgraded to 2.x version

@dolby360
Copy link

dolby360 commented Feb 3, 2022

I have the same issue

@dolby360
Copy link

dolby360 commented Feb 3, 2022

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

I'm not sure how it should work on react

@charles-aguiar
Copy link

I have experienced the same bug.

@charles-aguiar
Copy link

charles-aguiar commented Feb 24, 2022

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
Copy link

Gr1mdrag0n commented Mar 22, 2022

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

7 participants