Namespaces

Material-UI

Material-UI TextField has for long time caused problems for Reagent users. The problem is that TextField wraps the input element inside a component so that Reagent is not able to enable input cursor fixes, which are required due to async rendering.

Good news is that Material-UI v1 has a property that can be used to provide the input component to TextField:

reactify-component can be used to convert Reagent component into React component, which can then be passed into Material-UI. The component should be created once (i.e. on top level) to ensure it is not unnecessarily redefined, causing the component to be re-mounted. For some reason Material-UI uses different name for ref, so the inputRef property should be renamed by the input component.

Wrapping for easy use

Instead of providing :InputProps :inputComponent option to every TextField, it is useful to wrap the TextField component in a way that the option is added always: