text_area entry containing unpaired opening (, [, { does not respect flex, vstack, or hstack widths

[ahgraber]

Describe the bug

I want to replicate the text editor, but I prefer to write in markdown / have the text persisted in State as markdown.
When using rx.text_area as a text entry field, if I type an opening (,[, or {, the text_area shrinks, which shifts everything in that flex, hstack, or vstack

To Reproduce

class State(rx.State):
    md: str = ""


def index() -> rx.Component:
    """Lay out main page."""
    return rx.flex(
            # editor edits text as HTML
            rx.text_area(
                set_contents=State.md,
                on_change=State.set_md,  
                width="50%",
            ),
            rx.box(
                rx.markdown(State.md),
                border="1px dashed #ccc",
                border_radius="4px",
                width="50%",
            ),

            direction="row",
            spacing="3",
        )

Expected behavior
text entered into the text_area should not alter how the page is rendered

Screenshots

Specifics (please complete the following information):

• Python Version: 3.12
• Reflex Version: 0.6.7
• OS: macOS 15.2
• Browser (Optional): Arc, Safari, Firefox

Additional context
Add any other context about the problem here.

[linear]

ENG-4344 text_area entry containing unpaired opening (, [, { does not respect flex, vstack, or hstack widths

[adhami3310]

hey there, set_contents doesn't exist on text_area, so you're setting the CSS property (which doesn't exist) to State.md. When such value includes unclosed parenthesis, it basically causes a syntax issue and eats into the next CSS property, it would have worked if you had the width before the set_contents.

The larger issue is still true to some degree, we ideally should fail when you provide a syntactically incorrect value to a CSS property. This issue is in emotion-js/emotion though. Not sure if they're interested in fixing it.