[TextField] Robust unique id - warning is not clear

[ddeath]

Problem description

I just started getting warnings: Warning: We don't have enough information to build a robust unique id for the TextField component. Please provide an id or a name.

The problem with this warning is that it does not provide much information. In stack trace is TextField - but I use only 3 TextFields in app and all of them have id provided.

So it means that some others components from material-ui are using the TextFields and they do not provide id to them.

Steps to reproduce

    import React from 'react';
    import ReactDOM from 'react-dom';
    import injectTapEventPlugin from 'react-tap-event-plugin';
    import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
    import AutoComplete from 'material-ui/AutoComplete';

    injectTapEventPlugin();


    ReactDOM.render(
      <MuiThemeProvider>
        <AutoComplete
          dataSource={[]}
          searchText="aa" />
      </MuiThemeProvider>
      ,
      document.getElementById('app'),
      () => {
      }
    );

Versions

• Material-UI: 0.15.1
• React: 15.1.0
• Browser: Version 53.0.2774.3 dev (64-bit)

Description

At least it should be specified in docs that autocomplete have to have id otherwise you will get an warning

Images & references

[radek-t]

Just found out that the same warning shows up as soon as you start using the DatePicker

[PsychoLlama]

Just started using this library, and we're seeing the same warning. We're using the material-ui/TimePicker component.

[slackday]

Same when trying to use AutoComplete set up as in the documentation http://www.material-ui.com/#/components/auto-complete

[aaj]

Same here :(

[leialexisjiang]

warning(name || hintText || floatingLabelText || id, We don't have enough information to build a robust unique id for the TextField component. Please provide an id or a name.);
the code found in TextField that used in AutoComplete, so just add hintText or floatingLabelText in AutoComplete fix this issue

[remon-nashid]

Great find @raycursif! The issue is, some components like DatePicker only use floatingLabelText and id from the attributes above. Sometimes a label is not desired and I'd like to keep id creation for material-ui. In any case, error message needs to be more explicit.

update
I set hintText on TimePicker component (hint text is 'From'). Here is the resulting id: undefined-From-undefined-7408

[mcst]

I have this issue but I am not using the TimePicker.

[jeveloper]

It's an old post, but i thought a fix is simple:

Although the message is confusing, this is relevant to DatePicker and TimePicker

Just add a unique id

.... id='uniqueid' ...

[oliviertassinari]

We have been porting the component on the v1-beta branch. We reimplemented it from the ground-up. It's fixed.

[tiggem1993]

Thanks @jeveloper

Issue FIXED!!! after declaration of id in DatePicker.

<DatePicker id="bdaypicker" ref="datePickerStartDate" container={"dialog"} onChange={that.handleDateChange} maxDate={new Date()} autoOk={true} textFieldStyle={{ display: "none" }} />