Dynamic Select Widgets: when to use set_options?

[UlrichGoebel]

Hi,

in my TUI I like to dynamically add (and remove) widgets, even select widgets. For some reason I can't give the options to the select widget during construction but have to do it later¹. So I try to use Select.set_options. But it hardly depends on when I call it wether it works or not. Have a look to my code.

It simply shows three buttons. Two of them will dynamically add an input widget and a select widget, the third will manipulate these widgets. The input widget is just to demonstrate what I would like to do even with the select widget.

The two event handlers for the first two buttons should...

1. build the widget
2. mount it
3. manipulate it (in case of the input widget set value, in case of the select widget set options)
4. avoid repetition, just for fun...

Step 3 works for the input widget, but not for the select widget. The error message is
NoMatches: No nodes match <DOMQuery query='SelectOverlay'> on Select(id='dynSelect') resp.
NoMatches: No nodes match <DOMQuery query='#dynSelect'> on Main(title='Main', classes={'-dark-mode'})
depending on the variant of step 3 (line 54/55).

Commanding out lines 54/55 will allow to use the third button (of cource after clicking the first and second). It will trigger the same code (line 64) which didn't work above, but here it works and set the select options.

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

class Main(App):
    
    CSS = """
        Grid {
            grid-size: 2;
        }
    """
    
    def compose(self):
        # make and remember a container for dynamically build widgets
        self.gridContainer = Grid()
        
        with Vertical():
            
            # Two buttons to dynamically insert widgets
            yield Button('Insert Input', id='insertInput')
            yield Button('Insert Select', id='insertSelect')
            
            # A button to manipulate the dynamically inserted widgets
            yield Button('Set options/value',id='setOptions')
            
            # At last the container (Grid) for dynamically build widgets
            yield self.gridContainer
    
    @on(Button.Pressed, '#insertInput')
    def iI(self):
        # build input widget
        Wdg = Input(id='dynInput')
        
        # mount it
        self.gridContainer.mount(Wdg)
        
        # manipulate it
        Wdg.value = 'Hello World'
        
        # works just once because of the id
        self.query_one('#insertInput').disabled = True
    
    @on(Button.Pressed, '#insertSelect')
    def iS(self):
        # build select widget
        Wdg = Select((), id='dynSelect')
        
        # mount it
        self.gridContainer.mount(Wdg)
        
        # try to manipulate it - doesn't work
        options = (('One', '1'), ('Two', '2'), ('Three', '3'))
        # Wdg.set_options(options)
        self.query_one('#dynSelect').set_options(options)
        
        # works just once because of the id
        self.query_one('#insertSelect').disabled = True
    
    @on(Button.Pressed, '#setOptions')
    def setOpt(self):
        options = (('Ten', '10'), ('Eleven', '11'), ('Twelve', '12'))
        # here the same code which didn't work at line 55:
        self.query_one('#dynSelect').set_options(options)
        self.query_one('#dynInput').value = 'Hello again'

if __name__ == "__main__":
    app = Main()
    app.run()

Where I'm wrong in my construction? Any ideas how to make it work?

Footnotes

1. Later in production step 1 will build much more then one widget and it is done by a "factory" which doesn't have an idea of the options, and visa verse the caller of the factory has no idea which widget will be a select. The options will come from another routine, which takes them from a database. Well, may be I have to rewrite the factory... ↩

[TomJGooding]

The problem is that the mount process has not yet completed, so you will need to await the result of mount. See https://textual.textualize.io/guide/app/#awaiting-mount

[UlrichGoebel]

Thank's, that solves it.

I think I have found out that the construction

async def handler(self, ...):
    await do_something(...)

has to be broken down recursively if the container.mount(SelectWidget) isn't done by the handler itself but by do_something, so in the example it could be

async def do_something(self, ...):
    ...
    await container.mount(SelectWidget)
    ....