Try to handle React's streaming renderer yielding at inopportune times #2413
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
|
Wow good catch, thanks for the reproduction @Dsan10s! I will defer to @probablyup on this one |
|
Sounds good, thanks @mxstbr ! |
|
Hi guys, any updates on this? Our app still has this issue :( Let me know if there's any other way I can help out! |
|
@mxstbr I don't know if this is necessarily the right fix but I can't think of a better solution since you can't really introspect the rendered stream well |
Added a test for interleaveWithNodeStream. The niche case where the style tag gets interleaved into a textarea causes the style tag to be rendered as text in the text area.
this helps for some edge cases like <textarea> where the element accepts children but has weird behavior for the children compared to typical HTML elements
quantizor
force-pushed
the
interleaveWithNodeStream-textarea-test
branch
from
425606b
to
ea34072
Compare
quantizor
approved these changes
Mar 23, 2019
quantizor
changed the title
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Added a test for interleaveWithNodeStream. The niche case where the
style tag gets interleaved into a textarea causes the style tag to be
rendered as text in the text area.
Hello styled-components maintainers, thank you for this useful CSS-in-JS library! It's been super useful for my projects so far
I have come across a very odd issue that I think is worth addressing
Very rarely, the chunks generated by react renderToNodeStream will have one chunk end with the opening tag and contents of a textarea, and the next chunk will start with the closing tag of the textarea. Combined with styled-components interleaveWithNodeStream, prepending the <style> tags to the chunk causes an issue specifically with textareas in this case. For any other elements, this has not caused an issue, since a style tag as a child of another tag typically just inserts the style tag into the DOM. However, textareas are an exception, as any children of a textarea will be interpreted as a string, and rendered as the initial textArea text, rather than being rendered as HTML node into the DOM.
I've created the following test to reproduce the issue, let me know if I can help further or provide further information. Many thanks!