React Input component crashes when inputRef is used

[download13]

If you use an Input element with inputRef, it clobbers the inputRef passed here resulting in an error being thrown here because this.controlEl is undefined.

I think there might be a workaround here: facebook/react#13029

[amorey]

Thanks for creating this issue. Are you currently running into this problem? Can you provide an example snippet?

[download13]

import React from "react";
import ReactDOM from "react-dom";
import { Input } from "muicss/react";

function App() {
  return <Input inputRef={() => console.log("hi")} />;
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

You should see an error in the console to the effect of TypeError: this.controlEl is undefined or Cannot set property _muiTextfield on undefined

https://codesandbox.io/s/quirky-wilbur-je6eg
The sandbox generates a lot of extra error output that's not helpful but the real error should be in there somewhere.

[tianhuil]

@amorey, @download13: I encountered this issue as well. Proposed solution in #315

[amorey]

Have you tried using the ref attribute to access the control element instead? Here's an example in the documentation for uncontrolled components:
https://www.muicss.com/docs/v1/react/input

[tianhuil]

Thanks @amorey: that works as well but could we then add controlEl to the typescript definition for Input?

[amorey]

Sure, though I'm not familiar with typescript. Can you submit a PR or show me how to add it?

[tianhuil]

Hi @amorey: sorry for the delayed response. I'll try to add it.

[tianhuil]

Added PR to DefinitelyTyped: DefinitelyTyped/DefinitelyTyped#43079

[amorey]

Awesome! Thanks! Let me know when it gets merged and then we'll close this issue.