Width problem for placeholder

[mhlmhl]

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

[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.

[ericgio]

I'm seeing this issue as well, both when a parent is initially rendered with display: none and when props change that should affect the input size. Even when forcing a prop change to the input, however, I'm not seeing it update as I would expect.

[JedWatson]

If someone can provide a link (e.g. to codesandbox) or adds an example that reproduces this I'd be happy to take a look at it

[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.

[thomaslc66]

Hello @JedWatson I have the same problem. Here you can find some of my implementation.
It's a really wierd behavior.

I have 2 lists that used the same method to render a input. They Both called renderColumn
First list is ok, second list isn't. I use a tab to switch between first list (password) and second (licence).
All state is in redux as i use redux-form.

const renderColumn = props => {
  const {
    index,
    renderToaster,
    input: { name, onChange, value },
    placeholder,
    ...restProps
  } = props;
  return (
    <Column
      onChange={onChange}
      renderToaster={renderToaster}
      text={value}
      maxLength={50}
      name={name}
      placeholder={placeholder}
      restProps={restProps}
    />
  );
};

<MDBTableBody>
       {fields.map((data, index) => {
            return (
              <tr key={"key_" + index}>
                <DeleteRow deleteARow={() => fields.remove(index)} />
                <Field
                  name={`${data}.login`}
                  component={renderColumn}
                  renderToaster={renderToaster}
                  placeholder={LOGIN}
                />
                <Field
                  name={`${data}.password`}
                  component={renderColumn}
                  renderToaster={renderToaster}
                  placeholder={PASSWORD}
                />
                <Field
                  name={`${data}.account`}
                  component={renderColumn}
                  renderToaster={renderToaster}
                  placeholder={ACCOUNT}
                />
              </tr>
            );
          })}
</MDBTableBody>

<MDBTableBody>
          {fields.map((data, index) => {
            return (
              <tr key={"key_" + index}>
                <DeleteRow deleteARow={() => fields.remove(index)} />
                <Field
                  name={`${data}.buyDate`}
                  component={renderColumn}
                  renderToaster={renderToaster}
                  placeholder={BUYDATE}
                />
                <Field
                  name={`${data}.key`}
                  component={renderColumn}
                  renderToaster={renderToaster}
                  placeholder={KEY}
                />
                <Field
                  name={`${data}.program`}
                  component={renderColumn}
                  renderToaster={renderToaster}
                  placeholder={PROGRAM}
                />
                <Field
                  name={`${data}.computer`}
                  component={renderColumn}
                  renderToaster={renderToaster}
                  placeholder={COMPUTER}
                />
              </tr>
            );
          })}
</MDBTableBody>

//render method of the Column Component
render() {
    const {
      text,
      indexPath,
      status,
      name,
      index,
      maxLength,
      onClick,
      placeholder
    } = this.props;
    return (
      <td className='align-vertical'>
        <AutosizeInput
          className='list_input'
          disabled={status}
          onClick={onClick}
          value={text}
          name={name}
          onChange={e => {
            this.props.onChange(e, indexPath);
          }}
          index={index}
          maxLength={maxLength}
          placeholder={placeholder}
        />
        <MDBIcon
          far
          icon='clone'
          className={
            this.state.isHovered ? "icon_clone_hover" : "icon_clone text-muted"
          }
          onClick={() => this.copyText(text)}
          onMouseEnter={this.handleHover}
          onMouseLeave={this.handleHover}
        />
      </td>
    );
  }
}

Here you can see, first line is not ok, but when i click on "Nouveau" button, the new line is ok.

Don't know if this can help you. But when i move my mouse hover the copy icon, then the autosize input take the good size. (my hover method only change the cursor of the mouse to display a hand cursor)

Hope it will help.

Edit:
Here is a picture of the state of the component:

[ozluy]

I just created a new NPM module please check it out:

• 252 byte size only 10% of react-input-autosize (2.3KB)

https://github.com/ozluy/calculate-text-width