2

I am trying to get the width of a ref (to a styled textarea element), and I am trying to get it every time that I add text to it: 

const Input = styled.textarea`
min-height: 44px;
max-width: 50px;
margin-right: 15px;
padding: 12px 22px;
font-size: 14px;
`;

class App extends Component {
state = { textArea: "" };

handleChange = e => {console.log("this.textAreaRef.offsetWidth", 
this.textAreaRef.offsetWidth);
    this.setState({
      textArea: e.target.value
    });
  };

render() {
  const { textArea } = this.state;
  return (
    <Input
      ref={textAreaRef => {
        this.textAreaRef = textAreaRef;
      }}
      onChange={this.handleChange}
      value={textArea}
    />
  );
}

}

I am able to get a width value console logged, but my problem is that it does not change as I add more text to it.

Here it is on codesandbox: https://codesandbox.io/s/vqk4kk8503

Petar Ivcec
  • 672
  • 1
  • 8
  • 23
  • "my problem is that it does not change as I add more text to it." One would expect that. The offsetwidth is computed as provided in the CSS. Max width of text area (50px), add padding (22px + 22px) then add width of textarea outline (1px + 1px). what results are you looking to see? – Oluwafemi Sule Mar 21 '19 at 06:56
  • `offsetWidth` might not be suited for your task. check https://stackoverflow.com/questions/454202/creating-a-textarea-with-auto-resize – UjinT34 Mar 21 '19 at 06:57
  • So you want to get width of inner text or what do you want to get.? – Pavel Kratochvil Mar 21 '19 at 07:10
  • Yes, I want to get the width of the text as it updates while I add text to it. – Petar Ivcec Mar 21 '19 at 07:26
  • Why do you want it to change? Would you like the textarea to resize horizontally? Given that you have set `max-width`, naturally no change in width would occur and it will always return the same value. – Jibin Joseph Mar 21 '19 at 07:52
  • my end goal is to make a text input that will match the width of the amount of text that is currently in it. Something like what can be seen here: https://codesandbox.io/s/72n62zjq40 – Petar Ivcec Mar 21 '19 at 08:01
  • @godof23 that is max-width of the textarea. What I am attempting to first measure is the width of the content within the textarea. My plan was to resize the textarea later on - if I could at least manage to measure the width of the text as it updates, as a starting point. – Petar Ivcec Mar 21 '19 at 08:59
  • `.offsetwidth` takes into account padding and borders too, so it would be unwise to use that. – Jibin Joseph Mar 21 '19 at 09:27
  • @godof23 Yes, that has already been established. – Petar Ivcec Mar 21 '19 at 10:03
  • @PetarIvcec My post answers your original question, however you can tell me if you are not able to reach your end goal of resizing the textarea. – Jibin Joseph Mar 21 '19 at 11:48

1 Answers1

0

Here is the working codesandbox

I resorted to making a <div id="dummyDiv"> and injected the text of the textarea into the same. Then I applied fontSize: '14px', fontFamily: 'monospace' and further computed the supposed width that just the text might have.

This exercise makes the text in the textarea and the dummy div visually identical, and thereby I fetched the height and width of the dummy div, which are approximate to the area taken up by the text in the textarea.

I have commented out the visibility: hidden; and added a red border to the #dummyDiv in styles.css just so that you can visually confirm that the solution works.

Jibin Joseph
  • 1,265
  • 7
  • 13