renderInput

[2manyvcos]

Hello,

I would like to use this with Semantic UI React's <Input> component.

I know that there is an option to specify a custom input component, but it doesn't work in this situation as described below:

The ref property which is provided to the input is a special field and doesn't get passed to the component itself but rather is handled by React internally. Unfortunately, Semantic UI wraps the HTML input in a container, so the ref is assigned to the container instead of the HTML input and there is currently no way to fix this.

So I would suggest to add something like a renderInput prop:

const renderFunc = this.props.renderInput || (props) => (<InputTag {...props} />)
input = renderFunc(attrs.input)
return (
  <span ...>
    {input}
    ...
  </span>
)

so that we can do things like this:

import { Input as SemanticInput } from 'semantic-ui-react'

<NumericInput
  ...
  renderInput={({ ref, ...props }) => (
    <SemanticInput
      transparent
      input={{ ref }}
      {...props}
    />
  )}
/>

What do you think?