The account name input field collapses when trying to insert prohibited characters
sergeivaskin1991 opened this issue · 6 comments
there is a regex validation that does not allow certain characters to be entered. if you select all the text and try to insert a character that does not go into the regex, then the input collapses #
demo.mov
There is no regex is autosize. I think you either have the wrong project, or are using something built on top 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
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.
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.
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.
It is fantastic!! Thanks a lot!!!! You helped a lot. Great respect, low bow and respect! 💪🏻 👍🏻