CODEWITHSUNDEEP
reactjsmaterial-ui
DennyHiu
DennyHiu

Reputation: 6100

How to access ref or focus to an material-ui/KeyboardDatePicker?

I try change the page focus to a single Datepicker component from material-ui (https://material-ui-pickers.dev/api/KeyboardDatePicker).

There, they clearly stated that any ref props will be forwarded to root component (whatever it is). So I assume it will behave like any typical input. But any attempt to access ref will throw an error: Warning: Function components cannot be given refs. Attempts to access this ref will fail. Did you mean to use React.forwardRef()?

// THIS DOESN'T
<KeyboardDatePicker
   clearable
   ref={this.inputs.birth_date} 
   value={this.state.birth_date}
   onChange={this.handleChangeDate}
/>

// THIS WORKS
<input ref={this.inputs.birth_date} />

Upvotes: 1

Views: 5258

Answers (1)

Ben K
Ben K

Reputation: 33

This appears to be a bug in the library. Fix is available in v4.0.0-alpha.4 https://github.com/mui-org/material-ui-pickers/issues/1303

Upvotes: 1

Related Questions