Not selectable option when after search

[selimdoyranli]

https://user-images.githubusercontent.com/8565993/104350590-53ed9a80-552a-11eb-85c6-a1d0abb5dc1f.mov

Originally posted by @bansalvks in https://github.com/tbleckert/react-select-search/issues/150#issuecomment-758819373

[selimdoyranli]

I reverted packages to

"fuse.js": "3.4.5", "react-select-search": "2.2.0"

fixed. but i think not a good solution

[ejabu]

I went through the code and try to commenting these two lines.

It works

[icaroscherma]

Using onChange fix this issue. The internal state of the selected value it's replaced if you don't propagate it, resulting in the examples showing this odd behavior. ;)

[ejabu]

@icaroscherma can you provide some full example ? thanks

[icaroscherma]

@ejabu

import React, {useState, useRef};
import {useSelect, fuzzySearch} from 'react-select-search';

const MyCustomSelect = ({ options, value, multiple, disabled, onChange, ...props }) => {
  const listRef = useRef(null);
  const [snapshot, valueProps, optionProps] = useSelect({
    options,
    value,
    multiple,
    disabled,
    onChange,
    search: true,
    filterOptions: fuzzySearch,
  });
  return ...; // your custom template goes here
};
const [selected, setSelected] = useState('');

return <><MyCustomSelect value={selected} onChange={setSelected} /></>;

Rephrasing what I said, the current render / hook flow of the project looks for a preset value after you search (exactly those 2 lines that you pointed), if you haven't a set value it will not display it, this is because it does a re-render to clear the search input.

[ivanjeremic]

I reverted packages to

"fuse.js": "3.4.5", "react-select-search": "2.2.0"

fixed. but i think not a good solution

This fixed it for me to thanks, something needs to be broken in the newer versions. PS. I was on the newest versions

[icaroscherma]

@ivanjeremic It's not broken in the newer versions, the approach used it's different, as the lib was rewritten to be more optimized. As you requested in issue #154 .

Here's your example: https://codesandbox.io/s/select-search-3-test-skjec

[tbleckert]

As @icaroscherma states, this was fixed in 3.0.4. Closing this one. @selimdoyranli let me know if this is still an issue.

[selimdoyranli]

As @icaroscherma states, this was fixed in 3.0.4. Closing this one. @selimdoyranli let me know if this is still an issue.

working on latest version. thank you

[khughitt]

In case anyone else runs into issues with more recent versions of fuse.js (e.g. "options.xx is undefined"), I was able to get it working by simply unpacking the matched options from the fuse query result, e.g.:

function fuzzySearch(options) {
  ...
  const opts = fuse.search(value);
  return opts.map(x => (x.item));
}