Search Does Not Filter Items
ztroop opened this issue · 3 comments
Using the latest version of react-select-search
, I'm trying to use the "search" functionality as demonstrated here.
import SelectSearch from 'react-select-search'
const options = [
{name: 'Swedish', value: 'sv'},
{name: 'English', value: 'en'},
{
type: 'group',
name: 'Group name',
items: [
{name: 'Spanish', value: 'es'},
]
},
];
<SelectSearch options={options} value="sv" name="language" placeholder="Choose your language" search />
What I get is a select menu that shows the options, lets me type in the bar, but doesn't filter as I would expect.
I had the same problem, had to add a filterOption prop, it appears there isn't a default filtering function in the current version (don't know if there ever was).
import { fuzzySearch } from "react-select-search";
<SelectSearch filterOptions={fuzzySearch} ......... />
Though I wasn't happy with the default fuzzy search so I tweaked it to stop it sorting the list by fuzzyness and decrease the threshold ever so slightly
function fuzzySearch(options) {
const fuse = new Fuse(options, {
keys: ["name", "groupName", "items.name"],
threshold: 0.2, // I was getting weird matches with the default 0.3
shouldSort: false, // This was changing the sort of my list
});
return (value) => {
if (!value.length) {
return options;
}
return fuse.search(value).map((_ref) => {
let { item } = _ref;
return item;
});
};
}
export const countries = [
{
name: 'Europe',
value: 'Europe',
type: 'group',
items: [
{ name: 'Sweden', code: 'Sweden', value: 'SE', disabled: true },
{ name: 'Denmark', code: 'Denmark', value: 'DK', disabled: true },
{ name: 'Estonia', code: 'Estonia', value: 'EE', disabled: true },
{ name: 'Norway', code: 'Norway', value: 'NO', disabled: true },
{ name: 'Finland', code: 'Finland', value: 'FI', disabled: true },
{ name: 'France', code: 'France', value: 'FR', disabled: true },
{ name: 'Germany', code: 'Germany', value: 'DE', disabled: true },
{ name: 'Netherlands', code: 'Netherlands', value: 'NL', disabled: true },
{ name: 'Latvia', code: 'Latvia', value: 'LV', disabled: true },
{ name: 'Lithuania', code: 'Lithuania', value: 'LT', disabled: true },
{ name: 'Luxembourg', code: 'Luxembourg', value: 'LU', disabled: true },
{ name: 'United Kingdom', code: 'UK', value: 'GB', disabled: true },
{ name: 'Poland', code: 'Poland', value: 'PL', disabled: true },
{ name: 'Ukraine', code: 'Ukraine', value: 'UA', disabled: true },
{ name: 'Ireland', code: 'Ireland', value: 'IE', disabled: true },
],
},
{
name: 'Other',
value: 'Other',
type: 'group',
items: [
{ name: 'China', code: 'China', value: 'CN', disabled: true },
{ name: 'Singapore', code: 'Singapore', value: 'SG', disabled: true },
{ name: 'Hong Kong', code: 'Hong Kong', value: 'HK', disabled: true },
{ name: 'Russian Federation', code: 'USSR', value: 'RU', disabled: true },
{ name: 'United States', code: 'USA', value: 'US', disabled: true },
{ name: 'Global', code: 'Global', value: 'xx', disabled: true },
],
},
]
import { fuzzySearch } from "react-select-search";
this does not work, tried with above Fuse example, still no luck
Note: removing disabled option also not helpful
@gregor-gh Your suggestion was correct. filterOptions
was a prop I was unaware of, as it's not shown in the Storybook example usage. I think a documentation update would be ideal.