[GH-ISSUE #116] React renderer should unset a node style attribute when it is `undefined` #27

New issue

Closed

opened 2026-03-02 23:43:57 +03:00 by kerem · 1 comment

kerem commented

2026-03-02 23:43:57 +03:00

Owner

Originally created by @remorses on GitHub (Aug 31, 2025).
Original GitHub issue: https://github.com/anomalyco/opentui/issues/116

Originally assigned to: @msmps on GitHub.

Currently the React renderer ignores style attributes with value null or undefined here (I think), instead it should somehow unset these properties. Not sure if opentui already has a method for that
github.com/sst/opentui@618e3b372e/packages/react/src/utils/index.ts (L169)

Repro, notice how the style does not reset on hover end:

import { render } from '@opentui/react'
import { useState } from 'react'

function HoverExample() {
    const [hovered, setHovered] = useState<boolean>(false)

    return (
        <box style={{ padding: 2 }}>
            <box
                onMouseOut={() => setHovered(false)}
                onMouseMove={() => setHovered(true)}
                style={{ padding: 1 }}
            >
                <text bg={hovered ? '#FF0000' : undefined}>Hover over me</text>
            </box>
        </box>
    )
}

render(<HoverExample />)

https://github.com/user-attachments/assets/c75777e8-7bd4-4aee-80a0-9a8e66ffa3a7

Originally created by @remorses on GitHub (Aug 31, 2025). Original GitHub issue: https://github.com/anomalyco/opentui/issues/116 Originally assigned to: @msmps on GitHub. Currently the React renderer ignores style attributes with value null or undefined here (I think), instead it should somehow unset these properties. Not sure if opentui already has a method for that https://github.com/sst/opentui/blob/618e3b372ee3444544dfb68002d98f4e298b9c50/packages/react/src/utils/index.ts#L169 Repro, notice how the style does not reset on hover end: ```tsx import { render } from '@opentui/react' import { useState } from 'react' function HoverExample() { const [hovered, setHovered] = useState<boolean>(false) return ( <box style={{ padding: 2 }}> <box onMouseOut={() => setHovered(false)} onMouseMove={() => setHovered(true)} style={{ padding: 1 }} > <text bg={hovered ? '#FF0000' : undefined}>Hover over me</text> </box> </box> ) } render(<HoverExample />) ``` https://github.com/user-attachments/assets/c75777e8-7bd4-4aee-80a0-9a8e66ffa3a7

kerem

2026-03-02 23:43:57 +03:00

closed this issue
added the
core

bug
labels

kerem commented

2026-03-02 23:43:58 +03:00

Author

Owner

@msmps commented on GitHub (Aug 31, 2025):

i fixed this recently in the core but only for top level nodes! this must've slipped the net - will look into fixing this

@msmps commented on GitHub (Aug 31, 2025): i fixed this recently in the core but only for top level nodes! this must've slipped the net - will look into fixing this

kerem referenced this issue

2026-03-02 23:45:32 +03:00

[PR #27] [MERGED] chore(box): update bg prop to backgroundColor #232

kerem referenced this issue

2026-03-14 09:13:46 +03:00

[PR #27] [MERGED] chore(box): update bg prop to backgroundColor #1012