React-select: react-virtualized-select compatibale with react-select v2?

Created on 9 May 2018  Â·  25Comments  Â·  Source: JedWatson/react-select

I have upgraded by react-select to version 2 beta, to be able to include grouped selects. I am facing few issues here,

1) Importing react-select.css throws an error that file is not found
import 'react-select/dist/react-select.css';
2) Also, i would want to know if react-virtualized-select is compatible with this version. I have tried to implement this, firstly the css breaks as the react-select.css is not loaded but it does show me the options and is quite fast , but the onchange function doesnt seem to be working. ( I am using the grouped select feature)

Any inputs on these issues will be useful, Thanks

Most helpful comment

@pallavi-syook I might have an answer for you

I was running across an issue with large amounts of data taking forever to render without being virualized.

In react-select v2 you can override different components. Override the MenuList component with the VIrtualList and you should be able to accomplish what you are trying to achieve.

selection_014

All 25 comments

The file is no longer there in v2. Just delete the import. If you want do styling yourself read up here:
https://deploy-preview-2289--react-select.netlify.com/styles#style-object

@pallavi-syook I might have an answer for you

I was running across an issue with large amounts of data taking forever to render without being virualized.

In react-select v2 you can override different components. Override the MenuList component with the VIrtualList and you should be able to accomplish what you are trying to achieve.

selection_014

This is great - does anyone have any thoughts on how I could possibly keep react-selects ability to dynamically size the row height? Examples I've followed on react-virtualize haven't produced great results.

Can you link to an example of what you're talking about?

Thanks @christopherthielen . I've been trying to get that to work myself.

It works OK, but it's got some problems, one of which is that it doesn't handle keyboard navigation well. The scrolling doesn't follow the focus. I've been trying to pick it apart and make it work, but haven't been able to.

This was, I think, also a problem with react-virtualized-select, which I had been using. I've been trying to upgrade to v2 to solve that problem. It's possible that I need ArrowKeyStepper to make it work. (UPDATE: It didn't.)

@christopherthielen
Just to adjust your example a bit, you'll want to make your components prop set prior to creating the component. That way, it won't cause a rerender every time because you're no longer passing a new object on Select.

@simsman2695 hi there, I was wondering where I'm suppose to put this code. Seems that it works from all the praise but not sure how to get it to work. For yours @christopherthielen it seems it breaks if no results come up from the filter typed. Honestly just wish V_1 had a menuIsOpen prop like V_2. Thanks for your contributions btw

@willbee28 if you look at @christopherthielen example, you can pass it in the components property of the react-select component

render() {
    return (
      <div style={{width: '300px'}}>
        <Select
          components={{ MenuList }}
          defaultValue={this.state.options[10]}
          options={this.state.options}
        />
      </div>
    );
  }

okay, thank you. I will try this!

@simsman2695 It works! Except there is a caveat. It seems that props such as menuIsOpen do not work with this, and that the width of the rows is fixed, so some rows overlap if text is too long.

@willbee28 menuIsOpen should still work

render() {
    return (
      <div style={{width: '100%'}}>
        <Select
          menuIsOpen={true}
          components={{ MenuList }}
          defaultValue={this.state.options[10]}
          options={this.state.options}
        />
      </div>
    );
  }

For the fixed with react-select requires a number for the property but you could do something like this to make it more flexible https://stackblitz.com/edit/react-select-v2-virtualized-af7f6t?file=index.js

@simsman2695 So I did just notice menuIsOpen works fine, but for some reason rowCount={rows.length} throws off an error: "Failed prop type: The prop rowCount is marked as required in List, but its value is undefined."
You have to choose a fixed length for the row count which sucks. Wondering if there is a work around.

Can you share your code? Why is it that you would want to change that?

I'm afraid I can't share as this is for my company and they are strict about these matters. I really appreciate all your help though. Let me troubleshoot a little more and I will get back to you.

<Select
                components={{ MenuList }}
                menuIsOpen={true}
                value={this.props.selectedStation}
                onChange={this.props.handleStation}
                options={this.props.stationOptions}
                filterOptions={this.props.filterOptions}
   />

Then I'm importing menuList as such:

import React, { Component } from 'react';
import { render } from 'react-dom';
import Select from 'react-select';
import { List } from 'react-virtualized';

const MenuList = props => {
  const rows = props.children;
  const rowRenderer = ({ key, index, isScrolling, isVisible, style }) => (
    <div key={key} style={style}>{rows[index]}</div>
  );

  return (
    <List
      className='menuList--overflow'
      width={1000}
      height={300}
      rowHeight={30}
      rowCount={rows.length}
      rowRenderer={rowRenderer}
    />
  )
}
export default MenuList;

and getting the error:
Error: Invalid offset NaN specified, preceded by "Failed prop type: The prop rowCount is marked as required in List, but its value is undefined." in the console.

What datatype is this.props.stationOptions?

an array of JSON data. That might be the problem.
EDIT: nvm, that's what its suppose to be; {value: , label: } entries.

Also typing in too many letters to filter throws an error, which is problematic. I don't mean to bombard with bugs, but I'm just putting it here so I don't forget.

Once again however, removing the dynamic rowCount removes this bug. I even see it on your example, if you type in one too many letters.

I found a solution! Basically just check if the props.children is an Array
during initialization of rows like such 'const rows = (Array.isArray(props.
children)) ? props.children : [];'. Did the job for me. Works because often
the props.children returns some weird sort of object when it is empty.
Thanks so much @simsman2695 https://github.com/simsman2695 for all of the
help and never giving up on me! Have a good one y'all.

On Mon, Nov 26, 2018 at 1:25 PM simsman2695 notifications@github.com
wrote:

What datatype is this.props.stationOptions?

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/JedWatson/react-select/issues/2594#issuecomment-441744988,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AZHNAcrYt7P1tLVcQ9ZeX-lV9bxkPBH6ks5uzDIzgaJpZM4T4MIj
.

--
Will Borwegen

FWIW, as pointed out in (duplicate) https://github.com/JedWatson/react-select/issues/2711#issuecomment-410947409 the keyboard up and down don't work (accessibility) when using the otherwise nice solution provided by https://github.com/JedWatson/react-select/issues/2594#issuecomment-409282590

Solution to use https://github.com/JedWatson/react-select/issues/2850#issuecomment-410318717 works better (also UP/DOWN keys)

@willbee28 I also had the same problem when trying to implement custom virtualized List. Your solution fixed it perfectly.

@simsman2695
Overriding the menuList seems to break group options:

https://stackblitz.com/edit/react-select-v2-virtualized-rhxwwy

just in case someone gets here there's a package that supports v2
https://www.npmjs.com/package/react-select-virtualized

not compatible with v3 as of now

Hi all,

In an effort to sustain the react-select project going forward, we're closing issues that appear to have been resolved via community comments (such as @simsman2695's answer).

We understand this might be inconvenient but in the best interest of supporting the broader community we have to direct our efforts towards the current major version (v3) and beyond.

However, if you feel this issue is still relevant and you'd like us to review it - please leave a comment and we'll do our best to get back to you, and we'll re-open it if necessary.

Was this page helpful?
0 / 5 - 0 ratings