Make our own dropdown component (phase out react-select)

[Marc-Andre-Rivet]

We are currently locked into a old(ish) version 1.2.1 of https://www.npmjs.com/package/react-select and can't easily migrate to the new 2.x version because of a hardcoded styling dependency (

dash-table/src/dash-table/components/Table/index.tsx

Line 20 in c031ca8

import 'react-select/dist/react-select.css';

)

We've encountered multiple styling and implementation issues with this dropdown (height changing, width forcing, positioning issues within a table with fixed rows/columns -- causing special implementation needs for said "fixed" options, etc.) and we should consider either using another pre-made component or building our own to better fit the needs of the table.

[bpostlethwaite]

I support this and not only for dash-table but across all our dash repos. Though we can and probably should do this incrementally and start in dash-table. react-select isn't saving us time given how complex its styling is and how brittle our react-select styling integration has become. It's a freaking dropdown.

[Marc-Andre-Rivet]

@bpostlethwaite Yes!

[valentijnnieman]

I'm currently looking into some DCC.Dropdown bugs, most of them I can't fix because they're residing in the react-virtualized-select package, which is no longer maintained. That package uses react-select version 1.0 internally by the way, and even though our deps have react-select 2.0 (which isn't used anywhere) we're still stuck with version 1.0. I'm currently trying to replace react-virtualized-select with react-select, but not sure about that solution (large datasets?), but if we're building our own Dropdown component... I'd say that's a much better solution!