Trying to make it work with mdbreact's Input tag

[ratcashdev]

I am trying to leverage the renderInput prop so that it uses the Input component from mdbreact (https://mdbootstrap.com/react/) like this:

...
renderInput={(props) => <Input {...props} label="MyLabel" icon="user" error="wrong" success="right" />}
... />

However, whenever I click on the resulting input field and try to enter a character, it crashes with

Uncaught TypeError: node.getBoundingClientRect is not a function
    at Autocomplete.setMenuPositions (bundle.js?e7452783c6a51b5f1d7e:37758)
    at Autocomplete.componentDidUpdate (bundle.js?e7452783c6a51b5f1d7e:37670)

How to make this work? If i use a composition of regular html div and input tags, it works, but is missing the animations and UX provided by the Input component

[CMTegner]

As explained in the renderInput documentation:

At the very least you need to apply props.ref and all props.on event handlers. Failing to do this will cause Autocomplete to behave unexpectedly.

Passing all the props to <Input> isn't enough here, as it's not a native <input> element, rather a wrapper around it. I'm not familiar with mdb, so you'll have to figure out if it's possible to pass an input-ref down to the actual input element.

[ratcashdev]

For future reference, this is how I made it work - seems a bit hacky, but does the job. The key was not to use the Input element, but the undelying TextField element:

renderInput={(props) => <TextField {...props} type='text' label="MyLabel" icon="user" error="wrong" success="right" ref={(el) => {if (el) {props.ref(el.inputElRef); this.state.inputEl=el.inputElRef;}}}/>}
...
onSelect={(val) => {this.setState({masterId: val}); this.state.inputEl.value=val;}}

Note the hard-assignnment of the value during onSelect.