[GH-ISSUE #221] react: Clearing certain props causes the reconciler to throw #824

New issue

Closed

opened 2026-03-14 08:42:03 +03:00 by kerem · 1 comment

kerem commented

2026-03-14 08:42:03 +03:00

Owner

Originally created by @CMTegner on GitHub (Oct 21, 2025).
Original GitHub issue: https://github.com/anomalyco/opentui/issues/221

When using @opentui/react, clearing (i.e. setting to null) certain props after initial render causes the reconciler to throw. I know for certain this happens for flexDirection and justifyContent, but the problem may be more widespread.

To reproduce, run the following in a shell:

cat <<< '
import { useState } from "react";
import { render, useKeyboard } from "@opentui/react";

function Example() {
    const [flexDirection, setFlexDirection] = useState("column");
    useKeyboard((key) => {
        if (key.name === "f") {
            setFlexDirection(null);
        }
    });
    return (
        <box flexDirection={flexDirection}>
            <text>press f to trigger bug</text>
        </box>
    );
}

render(<Example />);' > index.tsx
bun add react @opentui/react
bun run index.tsx

This seems to be happening because the appropriate parser functions (parseJustify, parseFlexDirection, etc) expect the value to be non-null, and the setters don't guard for this case.

Originally created by @CMTegner on GitHub (Oct 21, 2025). Original GitHub issue: https://github.com/anomalyco/opentui/issues/221 When using @opentui/react, clearing (i.e. setting to `null`) certain props after initial render causes the reconciler to throw. I know for certain this happens for `flexDirection` and `justifyContent`, but the problem may be more widespread. To reproduce, run the following in a shell: ```sh cat <<< ' import { useState } from "react"; import { render, useKeyboard } from "@opentui/react"; function Example() { const [flexDirection, setFlexDirection] = useState("column"); useKeyboard((key) => { if (key.name === "f") { setFlexDirection(null); } }); return ( <box flexDirection={flexDirection}> <text>press f to trigger bug</text> </box> ); } render(<Example />);' > index.tsx bun add react @opentui/react bun run index.tsx ``` This seems to be happening because the appropriate parser functions (`parseJustify`, `parseFlexDirection`, etc) expect the value to be non-null, and the setters don't guard for this case.

kerem

2026-03-14 08:42:03 +03:00

closed this issue
added the
core

bug

react
labels

kerem commented

2026-03-14 08:42:20 +03:00

Author

Owner

@kommander commented on GitHub (Oct 23, 2025):

This was auto-closed by the PR mentioning this. Let me know if something is missing.

@kommander commented on GitHub (Oct 23, 2025): This was auto-closed by the PR mentioning this. Let me know if something is missing.