KeyboardDatePicker - cannot get a reference to the inner input element

Viewed 235

I would like to use a custom DatetimeEditor React component as a custom editor for a parent grid component. Part of this implementation requires access to the underlying input element for the Material-ui KeyboardDatePicker.

library versions: @material-ui/core: ^4.11.0 @material-ui/pickers: ^3.2.10 react: ^16.13.1 react-dom: ^16.13.1

Simplified DatetimeEditor component:

import React from 'react';
import { KeyboardDatePicker } from '@material-ui/pickers';

export default class DatetimeEditor extends React.Component {
  constructor(props) {
    super(props);

    this.refs = React.createRef();
  }

  componentDidMount() {
    this.refs.current.addEventListener('keydown', this.onKeyDown);
  }

  render() {
    return (
      <KeyboardDatePicker
        // inputRef={this.refs}
        // ref='input'
        // inputRef={(input) => (this.refs = input)}
        
        other properties....

        inputProps={{
          disableUnderline: true,
          // ref: this.refs,
        }}
      />
    )
  }
}

Error situation: In the componentDidMount method, this.refs is not being set to the inner input element of the KeyboardDatePicker component. The commented out lines of code in the render() section are what I have tried in various combinations.

I'm also aware that string refs are depreciated and that forwardRefs are an option but cannot find a relevant example implementation.

0 Answers
Related