Regression: textarea ‘jumps’ after initial load

[humphreybc]

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%"
});

[FrancescoCioria]

I think I know the reason: after #71 we're always initializing autosize asynchronously by wrapping it in a setTimeout.

(The issue was opened after the discussion in #69)

The only idea I can come up with to make everyone happy is to optionally wrap it in a setTimeout based on some kind of prop.

[apuntovanini]

@FrancescoCioria confirmed it changed behaviour, I think passing a prop could make everyone happy. How about an async boolean prop?

[FrancescoCioria]

How about an async boolean prop?

sounds good 👍

I would still force it to be async when (typeof maxRows === 'number') as it was before, otherwise the maxRows feature doesn't work correctly

[renchap]

I sent a PR fixing this: #103

[FrancescoCioria]

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