[PR #414] [MERGED] fix: reset flex properties on style removal #1297

New issue

Closed

opened 2026-03-14 09:29:17 +03:00 by kerem · 0 comments

kerem commented

2026-03-14 09:29:17 +03:00

Owner

📋 Pull Request Information

Original PR: https://github.com/anomalyco/opentui/pull/414
Author: @edlsh
Created: 12/13/2025
Status: ✅ Merged
Merged: 12/23/2025
Merged by: @kommander

Base: main ← Head: fix/flex-state-change-391

📝 Commits (7)

1588e49 fix: reset flex properties on style removal (#391)
606a36c refactor(tests): simplify layout tests to use testRender helper
22e0b81 Merge branch 'main' into fix/flex-state-change-391
3aa54b1 Merge branch 'main' into fix/flex-state-change-391
ececaa9 Merge branch 'main' into fix/flex-state-change-391
12852cf prettier
4531450 cleanup

📊 Changes

5 files changed (+0 additions, -0 deletions)

View changed files

📝 packages/core/src/Renderable.ts (+7 -16)
📝 packages/core/src/lib/yoga.options.test.ts (+55 -0)
📝 packages/core/src/lib/yoga.options.ts (+28 -0)
📝 packages/react/src/utils/index.ts (+16 -12)
📝 packages/react/tests/layout.test.tsx (+98 -0)

📄 Description

Fix flex state change bug

Fixes #391

Problem

When switching from <box alignItems="center"> to <box> via React state, alignment stuck at previous value instead of resetting to default.

Root Causes

setStyle didn't reset removed style properties to null
Flex properties only set conditionally—removing them left stale Yoga node values
parseAlign defaulted to Auto, not Stretch (CSS spec for align-items)

Changes

yoga.options.ts: Added parseAlignItems() defaulting to Stretch
Renderable.ts: Set flex properties unconditionally; use parseAlignItems for alignItems
utils/index.ts: Reset removed style keys to null in setStyle

References

Per MDN align-items:

Initial value: normal. For flex items, the keyword behaves as stretch.

Per W3C CSS Flexbox Level 1:

The official specification for flexbox alignment behavior.

Per Yoga Layout Styling:

Documents Yoga's defaults and differences from web CSS (notably align-content defaults to flex-start—but align-items is not listed, meaning it follows CSS default of stretch).

Verification

cd packages/react && bun test layout.test.tsx
# 21 pass, 0 fail

Tests added:

should use default alignItems when conditionally switching components with React state
should correctly align text when box has no explicit alignItems
should reset alignItems when style prop removes the property

_{🔄 This issue represents a GitHub Pull Request. It cannot be merged through Gitea due to API limitations.}

## 📋 Pull Request Information **Original PR:** https://github.com/anomalyco/opentui/pull/414 **Author:** [@edlsh](https://github.com/edlsh) **Created:** 12/13/2025 **Status:** ✅ Merged **Merged:** 12/23/2025 **Merged by:** [@kommander](https://github.com/kommander) **Base:** `main` ← **Head:** `fix/flex-state-change-391` --- ### 📝 Commits (7) - [`1588e49`](https://github.com/anomalyco/opentui/commit/1588e49b81dfc575e6b5f7e94aeb821c7fe5b82c) fix: reset flex properties on style removal (#391) - [`606a36c`](https://github.com/anomalyco/opentui/commit/606a36cd10226e90fccfb5e87cc20fd082a69ad6) refactor(tests): simplify layout tests to use testRender helper - [`22e0b81`](https://github.com/anomalyco/opentui/commit/22e0b81b43b75def3aead608bee301b7f361cee1) Merge branch 'main' into fix/flex-state-change-391 - [`3aa54b1`](https://github.com/anomalyco/opentui/commit/3aa54b15d85ade6be3da7f47f84f7b0c0562f15c) Merge branch 'main' into fix/flex-state-change-391 - [`ececaa9`](https://github.com/anomalyco/opentui/commit/ececaa99b5787b87de8fefbd724ed5f2bb251c4d) Merge branch 'main' into fix/flex-state-change-391 - [`12852cf`](https://github.com/anomalyco/opentui/commit/12852cf238b38d3b5448ae92e4f16ee79615c0ee) prettier - [`4531450`](https://github.com/anomalyco/opentui/commit/4531450f73248bb630efd154e999c436ecb5dbdf) cleanup ### 📊 Changes **5 files changed** (+0 additions, -0 deletions) <details> <summary>View changed files</summary> 📝 `packages/core/src/Renderable.ts` (+7 -16) 📝 `packages/core/src/lib/yoga.options.test.ts` (+55 -0) 📝 `packages/core/src/lib/yoga.options.ts` (+28 -0) 📝 `packages/react/src/utils/index.ts` (+16 -12) 📝 `packages/react/tests/layout.test.tsx` (+98 -0) </details> ### 📄 Description ## Fix flex state change bug Fixes #391 ### Problem When switching from `<box alignItems="center">` to `<box>` via React state, alignment stuck at previous value instead of resetting to default. ### Root Causes 1. `setStyle` didn't reset removed style properties to `null` 2. Flex properties only set conditionally—removing them left stale Yoga node values 3. `parseAlign` defaulted to `Auto`, not `Stretch` (CSS spec for `align-items`) ### Changes - **`yoga.options.ts`**: Added `parseAlignItems()` defaulting to `Stretch` - **`Renderable.ts`**: Set flex properties unconditionally; use `parseAlignItems` for `alignItems` - **`utils/index.ts`**: Reset removed style keys to `null` in `setStyle` ### References Per [MDN align-items](https://developer.mozilla.org/en-US/docs/Web/CSS/align-items): > Initial value: `normal`. For flex items, the keyword behaves as `stretch`. Per [W3C CSS Flexbox Level 1](https://www.w3.org/TR/css-flexbox-1/): > The official specification for flexbox alignment behavior. Per [Yoga Layout Styling](https://www.yogalayout.dev/docs/styling/): > Documents Yoga's defaults and differences from web CSS (notably `align-content` defaults to `flex-start`—but `align-items` is not listed, meaning it follows CSS default of `stretch`). ### Verification ```sh cd packages/react && bun test layout.test.tsx # 21 pass, 0 fail ``` Tests added: - `should use default alignItems when conditionally switching components with React state` - `should correctly align text when box has no explicit alignItems` - `should reset alignItems when style prop removes the property` --- <sub>🔄 This issue represents a GitHub Pull Request. It cannot be merged through Gitea due to API limitations.</sub>