Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Try to handle React's streaming renderer yielding at inopportune times #2413

Conversation

Projects
None yet
3 participants
@Dsan10s
Copy link
Contributor

Dsan10s commented Feb 24, 2019

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!

@mxstbr

This comment has been minimized.

Copy link
Member

mxstbr commented Feb 24, 2019

Wow good catch, thanks for the reproduction @Dsan10s! I will defer to @probablyup on this one

@mxstbr mxstbr requested a review from probablyup Feb 24, 2019

@Dsan10s

This comment has been minimized.

Copy link
Contributor Author

Dsan10s commented Feb 25, 2019

Sounds good, thanks @mxstbr !

@Dsan10s

This comment has been minimized.

Copy link
Contributor Author

Dsan10s commented Mar 6, 2019

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 @probablyup

@probablyup

This comment has been minimized.

Copy link
Contributor

probablyup commented Mar 21, 2019

@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

Dsan10s and others added some commits Feb 24, 2019

Styled Components test interleaveWithNodeStream
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.
when streaming try to inject outside the nearest element
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

@probablyup probablyup force-pushed the Dsan10s:interleaveWithNodeStream-textarea-test branch from 425606b to ea34072 Mar 21, 2019

@probablyup
Copy link
Contributor

probablyup left a comment

Chatted with the other core team members on 🐦 and we're going to ship this fix

@probablyup probablyup changed the title Styled Components test interleaveWithNodeStream Try to handle React's streaming renderer yielding at inopportune times Mar 23, 2019

@probablyup probablyup merged commit 80ca302 into styled-components:master Mar 23, 2019

1 check passed

continuous-integration/travis-ci/pr The Travis CI build passed
Details
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.