Comments (6)
There is no regex is autosize. I think you either have the wrong project, or are using something built on top autosize.
from autosize.
https://codesandbox.io/s/flamboyant-wood-krnk7u?file=/src/component.tsx
Here is a link to a demo. here it just shows how the auto-sized textbox collapses when used with a regex. we ourselves use the regular expression along with the autosize library. we don't want this behavior. it is necessary that if a character is entered that is not in the regex, the autosize behavior does not change, but does not collapse
from autosize.
Ah, I think I understand now. This is outside the scope of autosize. I spent too long trying to get this to work from the outside but I felt like it was possible and wanted to see it through. See the updated sandbox: https://codesandbox.io/s/white-dawn-czyc7x
The main points are that the oninput
event cannot be cancelled, so whatever the user types (or pastes) will become the value of the element. The best you can do is quickly strip the invalid text out after the input event has fired. However, Autosize is also listening to the input event to do its work.
I worked around that by setting up an input event handler before autosize that calls stopImmediatePropagation
on the event if the input text does not pass validation. This prevents autosize from receiving the event, but it does not stop the invalid text from becoming the value of the textarea. React needs to rerender the component to sync what is shown on screen with the value it has in local state. However, passing the current local state for value to setValue isn't going to trigger a rerender because it's the same value. React sees this as an unnecessary rerender and discards it, not knowing that the value on the screen no longer matches local state. This is what I added a method to force a rerender when validation fails.
Sorry, I know all that is complicated. I hope that will all make sense once you review the code and test it in the sandbox.
from autosize.
You could modify the autosize script to take in a validation function in order bypass needing to call stopImmediatePropagation, but that's too niche of a use case for me to make it part of the official release.
from autosize.
It dawned on me that I didn't need to trigger a rerender, all that is needed is to directly assign the local state value to the value of the textarea element: https://codesandbox.io/s/prod-cookies-ebwusm?file=/src/App.tsx
This gets the onscreen value to match what React would rendered if forced to. This bings onscreen state back inline with React's local state and I think this is a cleaner solution.
from autosize.
It is fantastic!! Thanks a lot!!!! You helped a lot. Great respect, low bow and respect! 💪🏻 👍🏻
from autosize.
Related Issues (20)
- How can I make it work with react hooks HOT 3
- How do i apply autosize for textareas created using JQuery ? HOT 3
- How to resize plus additional more row. HOT 2
- Bug with scroll-behavior: smooth HOT 2
- Padding bottom not working with Firefox ? HOT 4
- 5.0.0 not marked as latest HOT 1
- ESM version uses ES6+ syntax other than import and export HOT 2
- 通过getRealMetrics方法获取density和通过getDisplayMetrics()获取的density值不一致 HOT 1
- Bug: Plugin Sporadically Adds Disabled Vertical Scrollbar HOT 1
- Adapter some phones for suddenly amplify the views and shrinking after.
- Page scrolls up when typing (when being zoomed out in Safari) HOT 5
- When the end of the line is reached, pressing the spacebar does not switch to a new line. HOT 1
- autosize 与multdex 在低版本上运行报错
- Conflicting with LastPass Browser Extension HOT 1
- [issue]autosize after changing padding HOT 2
- Release note for each major update? HOT 2
- Text "jumps" when new line since 6.0.1 HOT 2
- [6.0.0 regression] Disabled horizontal scrollbar appears when reaching max-height HOT 3
- Jerky inertial scrolling on iOS HOT 1
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 autosize.