Dataframe cell click not working properly in tabbed view

Describe the bug

When using a TabbedInterface with multiple tabs that use gr.DataFrame, the dataframe cell selection behavior changes - the cell of the dataframe in the second tab can only be clicked once (see code examples below for details).

Have you searched existing issues? 🔎

[X] I have searched and found no existing issues

Reproduction

Correct Behaviour:

You can click the same dataframe cell and then hide the shown view multiple times. On hide view, the <td> tag is correctly defocussed (focus class is removed).

Steps to reproduce:

click "Tab 2"
click any cell
click "hide me after click"
click the same cell again => works great!

Code Example:

import gradio as gr
import pandas as pd

df = pd.DataFrame(
    {
        "Instruments": ["Piano", "Sax", "Guitar", "Violin"],
        "Cars": ["Tesla", "Ferrari", "Lamborghini", "Aston Martin"],
    }
)

def select_cell(event: gr.SelectData) -> tuple:
    df.iloc[event.index[0], event.index[1]] = event.value + " click"
    return gr.update(visible=True), gr.update(value=event.value), gr.update(value=df)

def hide_view() -> dict:
    return gr.update(visible=False)

with gr.Blocks() as tab_1:
    gr.Markdown("# Tab 1")
    # df_tab_1 = gr.DataFrame(value=df, elem_id="tab_1")

with gr.Blocks() as tab_2:
    df_tab_2 = gr.DataFrame(value=df, elem_id="tab_2")
    with gr.Row(visible=False) as view:
        with gr.Column():
            selected_item = gr.Markdown()
            hide_button = gr.Button("hide me after click")

    df_tab_2.select(fn=select_cell, outputs=[view, selected_item, df_tab_2])
    hide_button.click(fn=hide_view, outputs=[view])

tabs = gr.TabbedInterface(title="Tabs", interface_list=[tab_1, tab_2], tab_names=["Tab 1", "Tab 2"])
tabs.launch()

Incorrect Behaviour:

When there is a gr.DataFrame in the first tab, the second gr.DataFrame int the second tab behaves differently. Here, we can only click on the cell once. If we hide the view, the cell stays unclickable as the <td> still contains the focus class. The dataframe kind of "freezes".

If the first tab does not contain a gr.DataFrame (e.g only a gr.Markdown), the gr.DataFrame in the second tab works correctly.

Steps to reproduce:

remove comment from # df_tab_1 = gr.DataFrame(value=df, elem_id="tab_1") and restart
click "Tab 2"
click any cell
click "hide me after click"
click the same cell again => nothing happens

Screenshot

No response

Logs

No response

System Info

Gradio Environment Information:
------------------------------
Operating System: Darwin
gradio version: 5.3.0
gradio_client version: 1.4.2

------------------------------------------------
gradio dependencies in your environment:

aiofiles: 23.2.1
anyio: 4.6.2.post1
fastapi: 0.115.3
ffmpy: 0.4.0
gradio-client==1.4.2 is not installed.
httpx: 0.27.2
huggingface-hub: 0.26.1
jinja2: 3.1.4
markupsafe: 2.1.5
numpy: 2.1.2
orjson: 3.10.10
packaging: 24.1
pandas: 2.2.3
pillow: 10.4.0
pydantic: 2.9.2
pydub: 0.25.1
python-multipart: 0.0.12
pyyaml: 6.0.2
ruff: 0.7.0
semantic-version: 2.10.0
starlette: 0.41.0
tomlkit==0.12.0 is not installed.
typer: 0.12.5
typing-extensions: 4.12.2
urllib3: 2.2.3
uvicorn: 0.32.0
authlib; extra == 'oauth' is not installed.
itsdangerous; extra == 'oauth' is not installed.

gradio_client dependencies in your environment:

fsspec: 2024.10.0
httpx: 0.27.2
huggingface-hub: 0.26.1
packaging: 24.1
typing-extensions: 4.12.2
websockets: 12.0

Severity

Blocking usage of gradio

gradio-app / gradio