Wrong item is focused when searching within array where items are re-ordered (fuzzy search)

[NullPainter2]

Hi,

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"));

[NullPainter2]

bump

[eabruzzese]

@NullPainter2 I had the same issue and managed to solve it with a ref:

const selectRef = useRef<AsyncSelect>();

// ...

const loadOptions = (inputValue, callback) => {
  callback(filterItems(inputValue));

  // HACK: Force the first item to be focused any time the options change.
  setTimeout(() => selectRef.current.select.focusOption('first'), 0);
};

// ...

<AsyncSelect
  ref={selectRef}
  cacheOptions
  loadOptions={loadOptions}
  defaultOptions
/>

[Nate-Wessel]

This bug is a major problem for my project, making the async select pretty much unusable. The focused option moves all over the place.

@NullPainter2 I had the same issue and managed to solve it with a ref:

const selectRef = useRef<AsyncSelect>();

// ...

const loadOptions = (inputValue, callback) => {
  callback(filterItems(inputValue));

  // HACK: Force the first item to be focused any time the options change.
  setTimeout(() => selectRef.current.select.focusOption('first'), 0);
};

// ...

<AsyncSelect
  ref={selectRef}
  cacheOptions
  loadOptions={loadOptions}
  defaultOptions
/>

This hack doesn't work for me. I get Uncaught TypeError: selectRef.current.select.focusOption is not a function

[Methuselah96]

Try selectRef.current.focusOption if you're on v5 (see the "Use forwardRef for all wrapped components" section of the v5 upgrade guide).

[Nate-Wessel]

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:

function loadOptions(textInput){
	return json(`${API}?name=${textInput.trim()}`)
		.then(graph.lookup)
		.then( jurs => jurs.map(jur=>({jur})) )  // this line is the fix for this bug
}
function onChange(option){
	let { jur } = option // then just unpack before using the option value
	navigate(`/jurisdiction/${jur.geo_id}`)
}