Proper way to remove widgets

[artur-shaik]

How I can properly reload my view with new widgets, by removing old ones?

[bot-boi]

I've been poking around the source the past couple days and I haven't seen anything like def remove_widget. I think this might be intentional but I'm not sure. You could delete the Widget object from the View.widgets property but I haven't tried that yet. You could also try setting the visible property of your widget to False.

[bot-boi]

You could also overwrite an area with a widget with None in a GridView for example, by using add_widget or place. There isn't really a proper way to do it

[artur-shaik]

I've tried to do self.view.widgets.clear(). Set becomes empty, but widgets still in view.

[artur-shaik]

Ok, looks like find some hacky solution that works:

        if isinstance(self.view.layout, DockLayout):
            self.view.layout.docks.clear()
        self.view.widgets.clear()

[stephenlutes]

@artur-shaik I was unable to get this to work outside of on_mount at the very start. How did you implement it?

[artur-shaik]

@stephenlutes I've implemented in inside textual event loop, not sure why you need it outside?

[stephenlutes]

I may be going about this the wrong way. I am trying to clear everything within an action when a certain key is pressed.

Update
I was able to get it to work by moving it into on_key instead of binding to an action.

[willmcgugan]

https://github.com/Textualize/textual/wiki/Sorry-we-closed-your-issue

[github-actions]

Did we solve your problem?

Consider buying the Textualize developers a coffee to say thanks.

– Textualize

[CatalanCabbage]

I needed to remove a particular widget, I'm doing this:

self.get_widget_by_id('my-id').remove()

[CatalanCabbage]

I want a progression of inputs where first question is a textbox, next is options and so on.
So I needed to replace the same widget id with different kinds of widgets.
We should probably use the ContentSwitcher.

---

Before I discovered ContentSwitcher, I used a very hacky way to do this. Not recommended, but here's a working example:

class Khartoum(App):
   input_component: Widget | None = None

...
   def set_input_component(self, component):
        self.input_component = component
        self.mount(component)

  def on_key(self, event: events.Key) -> None:
        if event.key == "q":
            self.exit()
            return
        
        # Remove the widget
        if event.key == "a":
            # If you're removing the widget in a different "action", you can use this - approach 1
            if self.input_component:
                self.input_component.remove()

        # Remove the widget and then add another with the same ID in the same action (ie., thread or event or whatever)
        if event.key == "b":
            # Remove the widget - approach 2
            if (self._nodes[0]._nodes.__contains__(self.input_component)):
                if self.input_component:
                    self._nodes[0]._nodes._remove(self.input_component)

            # Add a new widget with the same ID
            self.set_input_component(TextArea("Press 'q' to quit", id='kh-inputs'))

Why is approach 2 used in event.key == "b"?
Approach 1 seems to remove the widget visually, but some internal state isn't updated.
So if we do this as part of the same action:

if event.key == "a":
   self.input_component.remove()
    self.set_input_component(TextArea("Press 'q' to quit", id='kh-inputs'))

it throws an error saying widget with ID kh-inputs already exists.
We need to clear the state manually.

[CatalanCabbage]

Here's the MUCH MUCH better way to do this with ContextSwitcher:

class Khartoum(App):
   def compose(self) -> ComposeResult:
        yield Header()
        yield DataTable()
        with ContentSwitcher(initial="kh-inputs-options", id="kh-inputs"):
            yield OptionList(
                "Aerilon",
                "Aquaria",
                id="kh-inputs-options"
            )
            yield TextArea("Press 'q' to quit", id='kh-inputs-textarea')

   def on_key(self, event: events.Key) -> None:
        if event.key == "q":
            self.exit()
            return
        
        if event.key == "a":
            self.query_one(ContentSwitcher).current = "kh-inputs-options"
        if event.key == "b":
            self.query_one(ContentSwitcher).current = "kh-inputs-textarea"

[pycaw]

What if I wanted to hide/unhide a docked/splitted widget? Using ContentSwitcher with the second element being some "void" widget just doesn't seem right.

Nevermind.
This works nicely:

    async def on_button_pressed(self, event: Button.Pressed) -> None:
        if event.button.id == "show_key_panel":
            try:
                key_panel = self.query_one("#key_panel", KeyPanel)
                await key_panel.remove()
            except NoMatches:
                await self.query_one("#center_vertical", Vertical).mount(make_key_panel())

[willmcgugan]

Set the display attribute