[TextField] <Select /> doesn't trigger onChange when its children is react-virtualized's <List />

[brianle1301]

When react-virtualized's <List /> is used with <TextField select />, onChange is not invoked. I have tried to render the options without virtualising and it worked perfectly.

• This is not a v0.x issue.
• I have searched the issues of this repository and believe that this is not a duplicate.

Expected Behavior 🤔

When clicking the option, the onChange function should be invoked, and the value of the field should be updated.

Current Behavior 😯

onChange is not invoked

Steps to Reproduce 🕹

This snippet explains best:

      <TextField
        variant="outlined"
        select
        label="Country"
        margin="normal"
        value={country}
        onChange={handleChange('country')}
        className={classes.inputField}
      >
        <List
          width={300}
          height={400}
          deferredMeasurementCache={cache}
          overscanRowCount={5}
          rowHeight={cache.rowHeight}
          rowCount={COUNTRIES.length}
          rowRenderer={({ index, key, style, parent }) => {
            const { name: countryName, code } = COUNTRIES[index];

            return (
              <CellMeasurer
                key={key}
                rowIndex={index}
                columnIndex={0}
                parent={parent}
                cache={cache}
              >
                <MenuItem value={countryName} style={style} className={classes.menuItem}>
                  {countryName} ({code})
                </MenuItem>
              </CellMeasurer>
            );
          }}
        />
        <MenuItem value="A">A</MenuItem>
      </TextField>

Context 🔦

I'm just trying to render a list of countries and I find out that if I don't virtualise, the list becomes laggy when being opened/closed.

Your Environment 🌎

Tech	Version
Material-UI	v4.1.2
React	v16.8.6
Browser	Chrome v75.0.3770.100
TypeScript	Nah

[oliviertassinari]

This is not supported, because of #14943.

[oliviertassinari]

I'm just trying to render a list of countries and I find out that if I don't virtualise, the list becomes laggy when being opened/closed.

Did you try the native implementation?

[brianle1301]

@oliviertassinari I do use it on smaller devices, but on desktops native selects are a bit off design

…

On Tue, 25 Jun 2019 at 19:03, Olivier Tassinari ***@***.***> wrote: I'm just trying to render a list of countries and I find out that if I don't virtualise, the list becomes laggy when being opened/closed. Did you try the native implementation? — You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub <#16364>, or mute the thread <https://github.com/notifications/unsubscribe-auth/ALSFW347PBVUDS2MHW3KMR3P4ICQ5ANCNFSM4H3HEFWA> .

[oliviertassinari]

@dreamsinspace Would the autocomplete better solve the problem https://material-ui.com/components/autocomplete/?

If you want us to implement a richer ComboxBox / AutoComplete MultiSelect, SelectList, upvoting would be a start: #13863. Thanks!

[brianle1301]

@oliviertassinari Cheers

[michaldudak]

@oliviertassinari why have you added the needs triage label?

[oliviertassinari]

@michaldudak I have added status: needs triage to all the issues that had no labels, about 2,500 of them. We are down to 1,700 right now.

@gzrae Please don't assign people on closed issues, it doesn't really serve a purpose, the goal is only to add the product scope label so developers owning the scope can easily find all the history. A closed 5 years old issue is often as relevant as a closed 1 month old issue.