Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Regression: textarea ‘jumps’ after initial load

See original GitHub issue

I just upgraded from 0.4.9 to 3.0.2 and noticed a change in behavior. Now, when the page loads, the textarea will noticeably ‘jump’ to the correct height, pushing everything below it down the page. Before, the textarea was the correct height on initial load, so there was no jump.

Here’s a gif with the CPU throttled in dev tools to try and emphasize the issue for the purpose of recording. The first tab is the latest version (3.0.2) and the second tab is the old version. If you download the gif and look at frame 70, you can see the moment where the title is loaded at the wrong height before jumping to the correct height in the next frame.


Here’s the relevant code (simplified to reproduction case):

import * as React from "react";
import TextareaAutosize from "react-autosize-textarea";
import { style } from "typestyle";

interface Props {
  defaultValue?: string;

export class NoteTitle extends React.Component<Props> {
  public render() {
    return <TextareaAutosize className={className} defaultValue={this.props.defaultValue} />;

const className = style({
  border: 0,
  fontSize: "40px",
  fontWeight: 600,
  lineHeight: "48px",
  margin: 0,
  overflow: "hidden",
  outline: 0,
  resize: "none",
  width: "100%"

Issue Analytics

  • State:closed
  • Created 6 years ago
  • Comments:5 (4 by maintainers)

github_iconTop GitHub Comments

FrancescoCioriacommented, Jun 18, 2018

I published the fixed in the new major 4.0.0 (as this fix is breaking for people using StyledComponents)

renchapcommented, Jun 16, 2018

I sent a PR fixing this: #103

Read more comments on GitHub >

github_iconTop Results From Across the Web

How to preserve cursor position on textarea text change?
I am doing similar things before. The way to change the cursor position is using: In your case, you can record down ......
Read more >
581846 - Pressing PageUp while in textarea moves ... - Monorail
1. Open the JS fiddle link · 2. Press enter a bunch of times to fill up the text area with blank lines...
Read more >
react-autosize-textarea - NPM Package Versions - Socket -
Start using Socket to analyze react-autosize-textarea and its 3 dependencies to secure your app from ... Regression: textarea 'jumps' after initial load #95 ......
Read more >
Inserting a text where cursor is in the LWC lightning-textarea
For example, if the cursor/focus is on a textarea saying 'Welcome to Salesforce ' and when user clicks on a link/button, then i...
Read more >
... Changelog]( #### Breaking: - Regression: textarea 'jumps' after initial load ...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Post

No results found

github_iconTop Related Hashnode Post

No results found