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
Describe the bug
When using a
TabbedInterface
with multiple tabs that usegr.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? π
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:
Code Example:
Incorrect Behaviour:
When there is a
gr.DataFrame
in the first tab, the secondgr.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 thefocus
class. The dataframe kind of "freezes".If the first tab does not contain a
gr.DataFrame
(e.g only agr.Markdown
), thegr.DataFrame
in the second tab works correctly.Steps to reproduce:
# df_tab_1 = gr.DataFrame(value=df, elem_id="tab_1")
and restartScreenshot
No response
Logs
No response
System Info
Severity
Blocking usage of gradio