Regression: textarea ‘jumps’ after initial load
See original GitHub issueI 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:
- Created 6 years ago
- Comments:5 (4 by maintainers)
Top 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: evt.target.selectionEnd. 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 - Socket.dev
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 >https://raw.githubusercontent.com/buildo/react-aut...
... Changelog](https://github.com/buildo/react-autosize-textarea/compare/v3.0.3...v4.0.0) #### Breaking: - Regression: textarea 'jumps' after initial load ...
Read more >
Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free
Top Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
I published the fixed in the new major
4.0.0
(as this fix is breaking for people using StyledComponents)I sent a PR fixing this: #103