Program raise Value Error or Deplicate Error when continuously pressing up or down arrow

[MohamedElgamal]

Having Three Component in my screen as follow TabbedContent, Search Area and Filteration are the tabbed content tabs are removed and added again if there is any item in search or filteration are chosen, its work correctly if i come to recreate the tabbed content with the new tabs but the problem come if i press the down and top are so fast to navigate through items the program crash as the video show :
Screencast from 2023-09-12 15-14-06.webm
error track :

simplified version form my code:

##############################################################################
class CustomTabPane(TabPane):
    def __init__(self, state, title, root_app, *children: Widget):
        super().__init__(title=title, id=f"state{state.get_id()}", *children)
        self.state = state
        self.root_app: AdminApp = root_app

    def compose(self) -> ComposeResult:
        with VerticalScroll(id=f"state{self.state.get_id()}"):
            yield StateTabContent(self.state, self.root_app)



##############################################################################
class StatesTabCreator(Widget):
    current_selected_tab_id = Reactive("")

    def __init__(self, root_app):
        super().__init__()
        self.state_dao = connection_dao
        self.current_state = ""
        self.root_app: AdminApp = root_app

    def compose(self) -> ComposeResult:
        states = self.state_dao.get_states()
        with TabbedContent():
            for index, state in enumerate(states):
                self.current_state = state
                yield CustomTabPane(state, state.get_state(), self.root_app)


    async def unmount_elements(self):
        tabbed_content: TabbedContent = self.query_one(TabbedContent)
        await tabbed_content.clear_panes()

    async def compose_requests_by_admins_group(self):
        states = self.state_dao.get_states()
        tabbed_content: TabbedContent = self.query_one(TabbedContent)
        for index, state in enumerate(states):
            await tabbed_content.add_pane(CustomTabPane(state=state,
                                                        title=state.get_state(),
                                                        root_app=self.root_app))

    @on(TabbedContent.Cleared)
    async def tabs_cleared(self, event):
        await self.compose_requests_by_admins_group()

    @on(TabbedContent.TabActivated)
    def state_tab_selected(self, event: TabbedContent.TabActivated):
        self.root_app.current_selected_tab.append(event.tab.id)


##############################################################################
class SearchCreator(Static):
    def __init__(self, root_app):
        super().__init__()
        self.root_app: AdminApp = root_app
        self.collaborator_users_list = ["all", *admin_dao.get_users_username_by_role("collaborator")]
        self.new_options_users = self.collaborator_users_list

    def compose(self) -> ComposeResult:
        yield Input(placeholder="Collaborators name")
        yield OptionList(*self.collaborator_users_list)


    @on(OptionList.OptionHighlighted)
    async def option_list_user_highlighted(self, event: OptionList.OptionHighlighted):
        highlighted_option_value = self.new_options_users[event.option_index]
        if self.first_time_to_run is False:
            state_tab_creator: StatesTabCreator = self.root_app.query_one(StatesTabCreator)
            await state_tab_creator.unmount_elements()
        self.first_time_to_run = False

    """ remaing code ."""

[MohamedElgamal]

i think the problem is coming from

async def compose_requests_by_admins_group(self):
        states = self.state_dao.get_states()
        tabbed_content: TabbedContent = self.query_one(TabbedContent)
        for index, state in enumerate(states):
            await tabbed_content.add_pane(CustomTabPane(state=state,
                                                        title=state.get_state(),
                                                        root_app=self.root_app))
 

which is adding widget before the old widget is completely removed i tried to fix it by adding await and async but the problem still occurs

[TomJGooding]

I've only skimmed the code, but it looks like tabs are cleared on OptionList.OptionHighlighted and then tabs added on TabbedContent.Cleared?

I think the problem is that TabbedContent.Cleared is only posted when there are no more tab panes. If you're very quickly changing the highlighted option, the TabbedContent might not have had chance to remove the panes yet. The message queue could look something like:

['OptionHighlighted', 'Cleared', 'OptionHighlighted', 'Cleared', 
'OptionHighlighted', 'OptionHighlighted', 'Cleared', 'Cleared']

[TomJGooding]

I worry this might have become an XY problem as mentioned in #3238, which is why I've only explained the possible problem rather than proposing a solution.

[MohamedElgamal]

yes you are true that what is happening, tried to fix it but failed so many times, also i made add_pane, clear_pane and OptionHighlighted async to avoid the problem but nothing changed

[TomJGooding]

While trying to create a minimal reproducible example, I found that if you hold the down key for long enough this app will crash.

Edit to add: the app will crash with a NoMatches error or ValueError.

from textual import on
from textual.app import App, ComposeResult
from textual.containers import Horizontal
from textual.widgets import OptionList, TabbedContent, TabPane


class ExampleApp(App):
    CSS = """
    TabbedContent {
        width: 70%
    }

    OptionList {
        width: 30%;
        height: 100%;
    }
    """

    def compose(self) -> ComposeResult:
        with Horizontal():
            yield TabbedContent()
            yield OptionList("Hold", "the", "down", "key")

    def on_mount(self) -> None:
        option_list = self.query_one(OptionList)
        option_list.focus()

    @on(OptionList.OptionHighlighted)
    async def on_option_list_option_highlighted(self) -> None:
        tabbed_content = self.query_one(TabbedContent)
        await tabbed_content.clear_panes()
        for tab_title in ("foo", "bar", "baz"):
            tab_pane = TabPane(tab_title, id=tab_title)
            await tabbed_content.add_pane(tab_pane)


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

[MohamedElgamal]

after amount of trying different stuff , Figured out simple solution to sleep main thread a part of second as follow

from textual import on
from textual.app import App, ComposeResult
from textual.containers import Horizontal
from textual.widgets import OptionList, TabbedContent, TabPane
import asyncio



class ExampleApp(App):
    CSS = """
    TabbedContent {
        width: 70%
    }

    OptionList {
        width: 30%;
        height: 100%;
    }
    """


    def compose(self) -> ComposeResult:
        with Horizontal():
            yield TabbedContent()
            yield OptionList("Hold", "the", "down", "key")

    def on_mount(self) -> None:
        option_list = self.query_one(OptionList)
        option_list.focus()

    @on(OptionList.OptionHighlighted)
    async def on_option_list_option_highlighted(self) -> None:
        tabbed_content = self.query_one(TabbedContent)
        await tabbed_content.clear_panes()
        await asyncio.sleep(0.4)
        for tab_title in ("foo", "bar", "baz"):
            tab_pane = TabPane(tab_title, id=tab_title)
            await tabbed_content.add_pane(tab_pane)


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

thanks @TomJGooding for your time and trying to help me.

[TomJGooding]

I have also raised issue #3295 as this feels like a possible bug, unless I am missing something.

P.S. You can add syntax highlighting in your code blocks, which makes it easier to read. For example:

```python
def greet(name: str | None) -> None:
    if name:
        print(f"Hello, {name}!")
    else:
        print("Hello, stranger!")
```

def greet(name: str | None) -> None:
    if name:
        print(f"Hello, {name}!")
    else:
        print("Hello, stranger!")