Wrong item is focused when searching within array where items are re-ordered (fuzzy search)
See original GitHub issueHi,
when I use async react-select with fuzzy searcher sometimes wrong items will be focused.
It is because react-select has internal reference (focusedOption
) to item which it assumes will be selected by user, fuzzy result changes order of items to be more precise, and since react-select is trying to pick the same focused item it will not pick the first item but it will keep focusing the same item until it exists.
Repro:
type "prague"
-> fuzzy result is ["prague 1", "prague 2" ...]
, focused item will be "prague 1"
-> type prague "prague 4"
-> fuzzy result will be ["prague 4", "prague 1", "prague 2" ...]
, focused item will still be "prague 1"
import ReactDOM from "react-dom";
import React, { Component } from 'react';
import Fuse from "fuse.js";
import AsyncSelect from 'react-select/async';
export const data = [
{value: "prague1", label: "Prague 1, Street"},
{value: "prague2", label: "Prague 2, Street"},
{value: "prague3", label: "Prague 4, Street"},
{value: "prague4", label: "Prague 8, Street"},
];
const fuzzySearch = new Fuse(data, {
keys: ["label"],
});
const filterItems = (inputValue: string) => {
// fuzzy search returns arrays with items which have different order
return fuzzySearch
.search(inputValue)
.map(found => found.item)
}
const loadOptions = (inputValue, callback) => {
// there is no need to delay result ...
callback(filterItems(inputValue));
};
type State = {
inputValue: string,
};
class Example extends Component<*, State> {
state = { inputValue: '' };
render() {
return (
<div>
<pre>inputValue: "{this.state.inputValue}"</pre>
<AsyncSelect
cacheOptions
loadOptions={loadOptions}
defaultOptions
/>
</div>
);
}
}
ReactDOM.render(<Example />, document.getElementById("root"));
Issue Analytics
- State:
- Created 3 years ago
- Reactions:2
- Comments:5
Top Results From Across the Web
Fuzzy search in JavaScript with results sorted by relevancy
It appears you are looking for fuzzy search functionality that returns results based on relevancy. Take a look at Fuse.js, ...
Read more >Fuzzy vlookup [Array formula] - Get Digital Help
The array formula demonstrated in this blog article has no "Fuzzy logic" ... It searches for values in List 2 and returns matching...
Read more >What is a Fuzzy Search? - TechTarget
A fuzzy search is performed using a fuzzy matching algorithm, which returns a list of results based on likely relevance even though search...
Read more >Fuzzy Search with Javascript | Typesense
Fuzzy Search refers to the process of approximately searching for a given search query. It may also be called as a “typo tolerant...
Read more >Fuzzy String Matching in Python Tutorial - DataCamp
Python fuzzy string matching. ... For this tutorial, I will focus on a case study in which the database problem mentioned above was...
Read more >Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start FreeTop Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Top GitHub Comments
Actually, the quick fix for this seems pretty straightforward, even if it is a bit of a hack. There’s some kind of equality checking among the old vs new options supplied on each update, probably to prevent unnecessary re-renders.
Instead of passing the options objects directly, each time they’re updated, they just need to be mapped into a new object so they evaluate to != any of the previous options.
In my case:
Try
selectRef.current.focusOption
if you’re on v5 (see the “Use forwardRef for all wrapped components” section of the v5 upgrade guide).