JedWatson / react-input-autosize

Auto-resizing input field for React
https://jedwatson.github.io/react-input-autosize
MIT License
769 stars 178 forks source link

Update width on viewport resize #160

Open intelligence opened 5 years ago

intelligence commented 5 years ago

Currently it seems as the input will keep it's width after the browser has resized.

I'm struggling to understand how to hook into the methods of the components to force an update, some help with an example would be appreciated!

dannypule commented 5 years ago

My workaround for this was to update the key prop on ReactInputAutosize when the window resized. Then key is updated it causes ReactInputAutosize to be recreated

  state = {
    key: 0
  };

  componentDidMount() {
    this.timeout = setTimeout(() => {
      this.setCorrectInputWidth();
    });

    window.addEventListener('resize', this.setCorrectInputWidth);
  }

  componentWillUnmount() {
    clearTimeout(this.timeout);
    window.removeEventListener('resize', this.setCorrectInputWidth);
  }

setCorrectInputWidth = () => {
    this.setState(prevState => ({ key: prevState.key + 1 }));
};

<ReactInputAutosize
  key={this.state.key}
/>