Comments (12)
You should use event.preventDefault()
to avoid that newline being entered: https://codesandbox.io/s/interesting-easley-m5960?file=/src/App.js
from react-textarea-autosize.
Doesn't setting value=""
work?
from react-textarea-autosize.
Probably it does, but how about the case that I don't want a controlled value
?
from react-textarea-autosize.
How do you update its value then?
from react-textarea-autosize.
I don't, I just use ref to get its value when user submits, then reset its value to '' (empty string)
from react-textarea-autosize.
@Qrysto I know this is an old one, but if any one else comes looking for an answer:
Because the input is uncontrolled, you need to reset the height manually via the DOM style property:
`
<Textarea inputRef={(textarea) => { this.textarea = textarea; }} ... > ` `this.textarea.style.height = '31px'`from react-textarea-autosize.
@jmcrthrs if you implement custom logic with i.e enter clearing the textarea's value you should control it - this is not an advise for this particular case, but rather a general React one. You should lift your state and control it when the need arises. Manipulating DOM is an anti-pattern and should be avoided.
from react-textarea-autosize.
I'm setting the body to an empty string however it does not reset the height. As you can see from the screenshot below, the text sets to empty string however I'm still left with two rows...
from react-textarea-autosize.
Im afraid that u would have to provide a full repro case for this situation before I could dive into this
from react-textarea-autosize.
Hi @Andarist thanks for the quick respond, I put together an example on codesandbox and my issue is actually related to the keydown event. When pressing enter, I'm sending a message (omitted in this example) and resetting the body however I'm still left with a line break.
https://codesandbox.io/s/great-wu-c4kgc?file=/src/App.js
from react-textarea-autosize.
Hi @Andarist did you have a chance to look into this?
from react-textarea-autosize.
Thanks so much @Andarist !
from react-textarea-autosize.
Related Issues (20)
- Page scrolls up when typing (when being zoomed out in Safari)
- When you limit the height of the div outside a <TextareaAutosize/>, the textarea component becomes scrollable. HOT 1
- Add spellcheck prop
- 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
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.