[GH-ISSUE #391] bug: flex system bug when state changes #865

New issue

Closed

opened 2026-03-14 08:51:22 +03:00 by kerem · 3 comments

kerem commented

2026-03-14 08:51:22 +03:00

Owner

Originally created by @k2on on GitHub (Dec 6, 2025).
Original GitHub issue: https://github.com/anomalyco/opentui/issues/391

Firstly, I love the work you guys are going on OpenTUI!! Keep up the good work!!

Repo: https://github.com/k2on/opentui-flex-bug

This code:

import { createCliRenderer } from "@opentui/core";
import { createRoot, useKeyboard } from "@opentui/react";
import { useState } from "react";

function App() {
  const [bool, setBool] = useState(false);

  useKeyboard(key => {
    if (key.name == "t") return setBool(v => !v);
  })

  if (!bool) return <box alignItems="center"><text fg="blue">My in the center!</text></box>;

  return <box><text fg="red">Why am I aligned to the right?</text></box>;
}

const renderer = await createCliRenderer();
createRoot(renderer).render(<App />);

Does not align the text correctly when the state changes.

Expected:

Actual after switching state (pressing "t"):

Thank you for your help.
Have a blessed day,
Max

Originally created by @k2on on GitHub (Dec 6, 2025). Original GitHub issue: https://github.com/anomalyco/opentui/issues/391 Firstly, I love the work you guys are going on OpenTUI!! Keep up the good work!! Repo: https://github.com/k2on/opentui-flex-bug This code: ```tsx import { createCliRenderer } from "@opentui/core"; import { createRoot, useKeyboard } from "@opentui/react"; import { useState } from "react"; function App() { const [bool, setBool] = useState(false); useKeyboard(key => { if (key.name == "t") return setBool(v => !v); }) if (!bool) return <box alignItems="center"><text fg="blue">My in the center!</text></box>; return <box><text fg="red">Why am I aligned to the right?</text></box>; } const renderer = await createCliRenderer(); createRoot(renderer).render(<App />); ``` Does not align the text correctly when the state changes. Expected: <img width="1772" height="1422" alt="Image" src="https://github.com/user-attachments/assets/6be0a540-52e9-4f97-95a6-370ca784ce80" /> Actual after switching state (pressing "t"): <img width="1772" height="1422" alt="Image" src="https://github.com/user-attachments/assets/49cd78ca-81ca-4e71-8a5f-3ba328b26c42" /> Thank you for your help. Have a blessed day, Max

kerem

2026-03-14 08:51:22 +03:00

closed this issue
added the
core

bug

help wanted
labels

kerem commented

2026-03-14 08:51:38 +03:00

Author

Owner

@k2on commented on GitHub (Dec 6, 2025):

The work around is adding alignItems="flex-start" to:

return <box><text fg="red">Why am I aligned to the right?</text></box>;

@k2on commented on GitHub (Dec 6, 2025): The work around is adding alignItems="flex-start" to: `return <box><text fg="red">Why am I aligned to the right?</text></box>;`

kerem commented

2026-03-14 08:51:43 +03:00

Author

Owner

@kommander commented on GitHub (Dec 7, 2025):

Does it behave as expected in the playground https://www.yogalayout.dev/playground ? It might be just flex behavior, opentui is using web defaults.

@kommander commented on GitHub (Dec 7, 2025): Does it behave as expected in the playground https://www.yogalayout.dev/playground ? It might be just flex behavior, opentui is using web defaults.

kerem commented

2026-03-14 08:51:48 +03:00

Author

Owner

@k2on commented on GitHub (Dec 8, 2025):

There is no problem with that code on web.

@k2on commented on GitHub (Dec 8, 2025): There is no problem with that code on web.