CODEWITHSUNDEEP
reactjsreact-select
Zuy.BK
Zuy.BK

Reputation: 23

React-select-fast-filter-options does not work properly

I'm trying to use React Virtualized Select combined with react-select-fast-filter-options

react-virtualized-select works well for me, but somehow I can not get react-select-fast-filter-options to work after following all steps in Git guide, after entering some value to select input, I got no results at all.

I ve created codesnippet in Code Sandbox for this issue https://codesandbox.io/s/v34qnr9w0 It does not work if labelKey is content, but when you change labelKey to label(default value), it works again.

The following is the complete code:

import React from 'react';
import { render } from 'react-dom';

import Select from 'react-virtualized-select';
import createFilterOptions from 'react-select-fast-filter-options';
import 'react-select/dist/react-select.css';
import 'react-virtualized/styles.css'
import 'react-virtualized-select/styles.css'

const styles = {
  fontFamily: 'sans-serif',
  textAlign: 'center',
};

class App extends React.Component {

  render() {
    const options = [
      { id: 'Stanford University', content: 'Stanford' },
      { id: 'Stan University', content: 'Stan' },
      { id: 'Stanford BBB University', content: 'Stanford BBB' },
      { id: 'Stanford CCC University', content: 'Stanford CCC' }
    ];

    const filterOptions = createFilterOptions({ options });

    return (
      <div style={styles}>
        <Select
          name="university"
          labelKey="content"
          valueKey="id"
          options={options}
          filterOptions={filterOptions}
          onChange={val => console.log(val)}
        />
      </div>
    );
  }
}

render(<App />, document.getElementById('root'));

This is a component' bug ?

Upvotes: 2

Views: 1034

Answers (1)

bvaughn
bvaughn

Reputation: 13497

The problem is that you're passing your non-default labelKey property to react-virtualized-select but not passing it to react-select-fast-filter-options (which is what's actually indexing your data). This second library accepts a labelKey param; (check out the params documentation).

So the fix is to do this:

const filterOptions = createFilterOptions({
  labelKey: 'content',
  options
});

By the way, CodeSandbox is having a caching problem at the moment so I moved your example to WebpackBin and fixed it there.

Upvotes: 4

Related Questions