[GH-ISSUE #197] Conditional components not rendered and causing layout issues #812

New issue

Closed

opened 2026-03-14 08:39:47 +03:00 by kerem · 3 comments

kerem commented

2026-03-14 08:39:47 +03:00

Owner

Originally created by @magnuswahlstrand on GitHub (Oct 2, 2025).
Original GitHub issue: https://github.com/anomalyco/opentui/issues/197

Hi! Feel free to close this ticket if you are not open for this type of bug reports 🙂

How to reproduce:

Use a conditional component {foo && <box><text content={foo} /></box>}
foo is updated (alternated between falsy and truthy

Issues:

Component is never shown, even though foo becomes truthy
When foo becomes truthy, horizontal height is added, but when it is falsy, it is not removed

Full snippet:

import { render } from "@opentui/react";
import { useState } from "react";

function App() {
  const [foo, setFoo] = useState("");

  const handleInput = (value: string) => {
    setFoo(value);
  }

  return (
    <box style={{ flexDirection: "column", flexGrow: 1, padding: 2 }}>
      <box title="Search Programming Languages" style={{ border: true, height: 3 }}>
        <input placeholder="Type to search..." focused onInput={handleInput} />
      </box>

      {foo && <box><text content={foo} /></box>}

      <box style={{ marginTop: 1 }}>
        <text content="↑↓ to navigate • Enter to select • ESC to exit" />
      </box>
    </box >
  );
}

render(<App />);

Originally created by @magnuswahlstrand on GitHub (Oct 2, 2025). Original GitHub issue: https://github.com/anomalyco/opentui/issues/197 Hi! Feel free to close this ticket if you are not open for this type of bug reports 🙂 ### How to reproduce: * Use a conditional component `{foo && <box><text content={foo} /></box>}` * `foo` is updated (alternated between falsy and truthy ### Issues: * Component is never shown, even though `foo` becomes truthy * When `foo` becomes truthy, horizontal height is added, but when it is falsy, it is not removed ![Image](https://github.com/user-attachments/assets/539fed53-c9c6-42a2-8572-bd7e292f6d45) ### Full snippet: ```tsx import { render } from "@opentui/react"; import { useState } from "react"; function App() { const [foo, setFoo] = useState(""); const handleInput = (value: string) => { setFoo(value); } return ( <box style={{ flexDirection: "column", flexGrow: 1, padding: 2 }}> <box title="Search Programming Languages" style={{ border: true, height: 3 }}> <input placeholder="Type to search..." focused onInput={handleInput} /> </box> {foo && <box><text content={foo} /></box>} <box style={{ marginTop: 1 }}> <text content="↑↓ to navigate • Enter to select • ESC to exit" /> </box> </box > ); } render(<App />); ```

kerem

2026-03-14 08:39:47 +03:00

closed this issue
added the
react
label

kerem commented

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

Author

Owner

@remorses commented on GitHub (Oct 2, 2025):

Try passing the text as children instead of content prop

@remorses commented on GitHub (Oct 2, 2025): Try passing the text as children instead of content prop

kerem commented

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

Author

Owner

@magnuswahlstrand commented on GitHub (Oct 2, 2025):

Same problem with

{foo && <box><text>{foo}</text></box>}

@magnuswahlstrand commented on GitHub (Oct 2, 2025): Same problem with ```tsx {foo && <box><text>{foo}</text></box>} ```

kerem commented

2026-03-14 08:40:13 +03:00

Author

Owner

@eli0shin commented on GitHub (Oct 6, 2025):

I'm testing this and it seems to be another insertBefore issue but it doesn't really make sense because box does seem to track children and handle insertBefore properly.
This example works if it is modified to either remove the box after the conditional box or to make the conditional box constant and make just its contents conditional.

@eli0shin commented on GitHub (Oct 6, 2025): I'm testing this and it seems to be another insertBefore issue but it doesn't really make sense because box does seem to track children and handle insertBefore properly. This example works if it is modified to either remove the box after the conditional box or to make the conditional box constant and make just its contents conditional.

kerem referenced this issue

2026-03-14 09:12:25 +03:00

[GH-ISSUE #812] Mouse scroll events lost in bottom portion of terminal after shrinking window #991

kerem referenced this issue

2026-03-14 09:44:38 +03:00

[PR #813] fix(core): update hitGrid dimensions on all resizes, not just growth #1582