Comments (9)
Somehow, using the defaultvalue
prop instead of the value
prop fixes the issue and the cursor/caret works properly...
from react-textarea-autosize.
So basically use one or the other. Thanks @HadrienPierart!
// Uncontrolled.
<Textarea
defaultValue={this.state.foo}
onChange={(event) => this.setState({foo: event.target.value})}/>
// Controlled.
<Textarea value={this.state.foo}/>
from react-textarea-autosize.
addendum this may be a React bug. facebook/react#5386
Well something is definately causing this behavior in this component but not my other inputs so there is still something specific that this component but the async set may not be the actual issue.
from react-textarea-autosize.
A partial solution is to check if props and states have changed in shouldComponentUpdate.
This will work for most cases except typing [enter] in the middle of the text.
Hope to get a better solution
key: 'shouldComponentUpdate',
value: function shouldComponentUpdate(nextProps, nextState) {
for (const i in nextProps) {
if (!(nextProps[i] == this.props[i])) {
return true;
}
}
for (const i in nextState) {
if (!(nextState[i] == this.state[i])) {
return true;
}
}
return false;
}
from react-textarea-autosize.
This is the same issue as seen here: reflux/refluxjs#43 (comment)
That's a link to a solution as well. Basically what @sohwendy is pointing to.
from react-textarea-autosize.
I don't think it has something w/ asynchronicity as I faced this issue w/ non-async code (sync redux action creator). It's a weird bug, b/c I render the same component in another part of the app, but it works fine.
from react-textarea-autosize.
I figured out what caused my issue: it was Modal
component from react-overlays
/react-bootstrap
+ any lib, that is child of Modal
and is passing value to input
/textarea
from its local state. I confirmed this with 2 such libs (this one + my form validator). This case can be reproduced w/ the following scenario:
<Modal>
<SomeLibThatPassesValueFormItsLocalStateToTextInputOrTextarea>
<input type="text" value={props.value} />
</SomeLibThatPassesValueFormItsLocalStateToTextInputOrTextarea>
</Modal>
On the props update I observe 2 re-renders in the input
component:
- updater triggered
- updated value passed to the root component
- first render w/ obsolete props
- second w/ correct next props
This first render w/ obsolete props is the reason of this issue: input receives outdated (its current) value (at this point cursor is placed correctly), but next async update sets next value, vdom flushes this update and browser resets cursor position.
If I do this:
<SomeLibThatPassesValueFormItsLocalStateToTextInputOrTextarea>
<Modal>
<input type="text" value={props.value} />
</Modal>
</SomeLibThatPassesValueFormItsLocalStateToTextInputOrTextarea>
There is only one render per update and everything works as expected.
It's quite late for me today, tomorrow I'll file an issue at react-overlays
/react-bootstrap
repo.
from react-textarea-autosize.
Issue: react-bootstrap/react-bootstrap#2323
from react-textarea-autosize.
I think there is no more issue here and going to close this now, if something stays unresolved, let me know and I reopen so we can work through it.
from react-textarea-autosize.
Related Issues (20)
- row-property is a noop? HOT 2
- Always getting this warning: Invalid DOM property `class`. Did you mean `className`? HOT 3
- Textarea with incorrect height at first render HOT 1
- Initial height is incorrect in Firefox HOT 4
- TypeError in version `8.4.1` HOT 5
- package gets resolved as commonjs from an esm project HOT 4
- When importing in Astro it fails to resolve (v8.5.0) HOT 2
- Nextjs 13.4.3 and v8.5.0 warning
- Invalid exports in package.json HOT 1
- textarea-autosize conflict with custom key bind HOT 1
- Id attribute value and name attribute value cannot be specified in hiddenTextarea
- Height on iOS Safari doesn't account for padding HOT 1
- package.json duplicate browser exports HOT 3
- Doesn't update if made to change width without re-rendering HOT 3
- SSR-only Error with NextJS on Edge Runtime - "document is not defined"
- Custom render HOT 1
- Simplest example does not work HOT 7
- Text Area grows to a height of max rows when it is re-rendered even though with a single line of text. HOT 4
- Pressing ctrl-Z does not undo
- Ref is not working properly with react-hook-form
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from react-textarea-autosize.