How to show Textarea when select specific option?

[Tim-Cao]

How to make Textarea appear when select Steps to reproduce option instead of by default?
For example

                with VerticalScroll(id="nav-5"):
                    DESCRIPTION_TYPE = [
                        ("Steps to reproduce", "STR"),
                        ("Test Cases", "TC"),
                    ]

                    yield Label("Enter the Jira ticket number: ")
                    yield Input(id="jira-ticket-number-5")
                    yield Label("Select the description type: ")
                    yield Select(DESCRIPTION_TYPE, id="description-type")
                    yield Label("Enter the steps to reproduce: ")
                    yield TextArea(id="steps-to-reproduce")
                    yield Static()
                    yield Button("Submit", variant="primary", id="button-5")

[davep]

A combination of handling the Select.Changed event and use of display: none styling in a class that gets added/removed should do the trick. For example:

from textual import on
from textual.app import App, ComposeResult
from textual.containers import Vertical
from textual.widgets import Select, Static, Input

class ShowHideExampleApp(App[None]):

    CSS = """
    Vertical > Static {
        height: 1fr;
        background: red;
    }

    .hidden {
        display: none;
    }
    """

    def compose(self) -> ComposeResult:
        with Vertical():
            yield Select(
                (("Show", "show"), ("Hide", "hide")),
                value="show", allow_blank=False
            )
            yield Static("Show/hide me")
            yield Input(placeholder="This comes after")

    @on(Select.Changed)
    def show_hide(self, event: Select.Changed) -> None:
        self.query_one("Vertical > Static").set_class(
            event.value == "hide", "hidden"
        )

if __name__ == "__main__":
    ShowHideExampleApp().run()

[davep]

Just correct the comparison logic in your code:

--- tim_cao_bug.py	2023-09-25 10:11:04
+++ tim_cao_bugfix.py	2023-09-25 10:11:27
@@ -19,8 +19,8 @@
 
     @on(Select.Changed)
     def show_selected_input(self, event: Select.Changed) -> None:
-        self.query_one("#option-a").set_class(event.value == "a", "hidden")
-        self.query_one("#option-b").set_class(event.value == "b", "hidden")
+        self.query_one("#option-a").set_class(event.value == "b", "hidden")
+        self.query_one("#option-b").set_class(event.value == "a", "hidden")
 
 
 if __name__ == "__main__":

If it's not clear what the cause and the correction is, try reading the logic out loud to yourself, for example, you had "hide option a if I've chosen option a" and "hide option b if I've chosen option b".

[Tim-Cao]

If unselected, both are shown on app. Additionally, Is there a solution using the positive condition not opposite one?

[Tim-Cao]

For example, could we change the css, they are display: none by default, if selected, css becomes display: inline-block or block

[davep]

Sure, there's a few different ways you could do it; looks like you're getting the idea now. For example:

from textual import on
from textual.app import App, ComposeResult
from textual.containers import Vertical
from textual.widgets import Select, Input


class ShowHideExampleApp(App[None]):
    CSS = """
    Input.show-hide {
        display: none;
    }

    Input.show-hide.visible {
        display: block;
    }
    """

    def compose(self) -> ComposeResult:
        with Vertical():
            yield Select((("Option A", "a"), ("Option B", "b")))
            yield Input("You selected A", classes="show-hide", id="option-a")
            yield Input("You selected B", classes="show-hide", id="option-b")

    @on(Select.Changed)
    def show_selected_input(self, event: Select.Changed) -> None:
        self.query_one("#option-a").set_class(event.value == "a", "visible")
        self.query_one("#option-b").set_class(event.value == "b", "visible")


if __name__ == "__main__":
    ShowHideExampleApp().run()

[Tim-Cao]

I got it. Regard class as condition. Many thanks @davep
https://developer.mozilla.org/en-US/docs/Web/CSS/Class_selectors

[davep]

Glad you got there. But do please remember that, while Textual's CSS is influenced by web CSS, they're not always the same. Our docs are always going to be the best place to look.