Merge pull request #1423 from davep/bug/1355/visibility-react

Fix changes to visibility needing an explicit refresh to take effect

Author: davep

CHANGELOG.md

@@ -12,6 +12,7 @@ and this project adheres to [Semantic Versioning](http://semver.org/).
 - Fixed issues with nested auto dimensions https://github.com/Textualize/textual/issues/1402
 - Fixed watch method incorrectly running on first set when value hasn't changed and init=False https://github.com/Textualize/textual/pull/1367
 - `App.dark` can now be set from `App.on_load` without an error being raised  https://github.com/Textualize/textual/issues/1369
+- Fixed setting `visibility` changes needing a `refresh` https://github.com/Textualize/textual/issues/1355
 
 ### Added
 

src/textual/css/styles.py

@@ -209,7 +209,7 @@ class StylesBase(ABC):
     node: DOMNode | None = None
 
     display = StringEnumProperty(VALID_DISPLAY, "block", layout=True)
-    visibility = StringEnumProperty(VALID_VISIBILITY, "visible")
+    visibility = StringEnumProperty(VALID_VISIBILITY, "visible", layout=True)
     layout = LayoutProperty()
 
     auto_color = BooleanProperty(default=False)

tests/test_visibility_change.py

@@ -0,0 +1,46 @@
+"""See https://github.com/Textualize/textual/issues/1355 as the motivation for these tests."""
+
+from textual.app import App, ComposeResult
+from textual.containers import Vertical
+from textual.widget import Widget
+
+
+class VisibleTester(App[None]):
+    """An app for testing visibility changes."""
+
+    CSS = """
+    Widget {
+        height: 1fr;
+    }
+    .hidden {
+        visibility: hidden;
+    }
+    """
+
+    def compose(self) -> ComposeResult:
+        yield Vertical(
+            Widget(id="keep"), Widget(id="hide-via-code"), Widget(id="hide-via-css")
+        )
+
+
+async def test_visibility_changes() -> None:
+    """Test changing visibility via code and CSS."""
+    async with VisibleTester().run_test() as pilot:
+        assert len(pilot.app.screen.visible_widgets) == 5
+        assert pilot.app.query_one("#keep").visible is True
+        assert pilot.app.query_one("#hide-via-code").visible is True
+        assert pilot.app.query_one("#hide-via-css").visible is True
+
+        pilot.app.query_one("#hide-via-code").styles.visibility = "hidden"
+        await pilot.pause(0)
+        assert len(pilot.app.screen.visible_widgets) == 4
+        assert pilot.app.query_one("#keep").visible is True
+        assert pilot.app.query_one("#hide-via-code").visible is False
+        assert pilot.app.query_one("#hide-via-css").visible is True
+
+        pilot.app.query_one("#hide-via-css").set_class(True, "hidden")
+        await pilot.pause(0)
+        assert len(pilot.app.screen.visible_widgets) == 3
+        assert pilot.app.query_one("#keep").visible is True
+        assert pilot.app.query_one("#hide-via-code").visible is False
+        assert pilot.app.query_one("#hide-via-css").visible is False