Width problem for placeholder

I’m using AutosizeInput with TagsInput and these inputProps:

inputProps={{
  className: 'react-tagsinput-input',
   placeholder: 'Add a theme',
}}

The props that are actually passed to AutosizeInput are:

type='text'
onChange={onChange}
value={value}
className : "react-tagsinput-input"
onBlur: ()
onFocus: ()
onKeyDown: ()
onPaste: ()
placeholder: "Add a theme"
ref: "input"

My problem: on initial render, when ‘value’ is empty, the input box is only a couple of pixels wide. I believe this is because the computation of ‘sizerValue’ in the AutosizeInput render function does not consider the placeholder.

As a temporary fix, I added the following. But it’s a hack because (a) it does not consider that the font could be wider or narrower, and (b) it defeats the autosizing function for tags that are shorter than 90 px.

minWidth: 90

[ericgio]

@JedWatson: From what I can tell, the issue is due to input styles only being set in componentDidMount. Moving that line here seems to solve the problem.

Happy to submit a PR for this, just wasn’t sure if there was a specific reason you were only setting the styles once.

[cgat]

I noticed this happening when my element was originally being rendered with display: none. In this case, the placeholder does not have a length and the element length fails to get set properly.