tabs switching cause scrolling up

[RRaphaell]

Summary

app scrolls up when I have tabs after some widgets and switch them

Steps to reproduce

Code snippet:

import streamlit as st

for i in range(20):
    st.markdown("dummy text")


tab1, tab2 = st.tabs(["tab1", "tab2"])

with tab1:
    st.video(video_path)

with tab2:
    st.video(video_path)

steps :

1. scroll down to the videos
2. switching tabs

Expected behavior:

tabs should be switched and focus stay on video

Actual behavior:

it scrolling up and I have to scroll down again

Debug info

• Streamlit version: 1.11.0
• Python version: 3.8.11

[lukasmasuch]

@RRaphaell Thanks for reporting this issue! I was able to reproduce it and have deployed a demo app here. The underlying issue is that when changing tabs, the height of the actual tab content is not correct for a split second. This influences the full height of the app -> which in turn influences the maximum possible scroll position -> and this causes the unexpected up scroll. This does not happen if there is enough content underneath the tab (try out in the demo app), since in that case the scroll position will not be larger than the maximum possible.

To find a solution here requires a bit more investigation. I tried out the renderAll property of the baseWeb component, but this only fixes it for a second tab change.

[RRaphaell]

thanks @LukasMasuch for your time. you are right but when I tested it by adding more content below it still happens if you scroll down to the new content and then switch tabs

[nicedouble]

+1 .I have the same issue.

[sfc-gh-tszerszen]

@LukasMasuch is correct about the source of the issue, when I've setup fixed height of the <video> React component it fixed the issue, however I don't think we want to have the fixed height for every video. I'd like to set fixed height on first componentDidMount, what do you think about such proposition?

[lukasmasuch]

@sfc-gh-tszerszen Thanks for investigating this! I think there are also a few other elements without a fixed height. For example, our built-in chart commands:

import streamlit as st
import pandas as pd
import numpy as np

chart_data = pd.DataFrame(np.random.randn(20, 3), columns=["a", "b", "c"])

for i in range(20):
    st.markdown("dummy text")


tab1, tab2 = st.tabs(["tab1", "tab2"])

with tab1:
    st.line_chart(chart_data)

with tab2:
    st.line_chart(chart_data)

So, we might need to figure out which elements are affected and apply the same fix.

I'd like to set fixed height on first componentDidMount, what do you think about such proposition?

Would be great if we can fix it this way, but this needs some testing if there are any negative side effects. E.g. in some situations, components are reused for different content, so just fixing the height on componentDidMount might lead to wrong height in some situations.

[sfc-gh-tszerszen]

PR-#5116 was just merged, in the 1.13 release issue should be resolved 👍 Thus I'm closing the issue now. @RRaphaell thank you for taking the time to report the issue 🥇 if the issue occurs after 1.13 we will reopen it

[EmilSeyfullayev]

I have the same issue which is closed, streamlit 1.16 version. When I choose something in tab 2 it jumps to tab1 and does not happen again until I rerun app, and selected items stay as selected. Everything as it is described in the issue. I have this with selectbox and multiselectbox.

[Weiyuan-codecodecodecodecode]

press F12 and find the specific block in html. It should be data-testid = "stTabs". Right click on it and copy selector. And do the following:

st.markdown("""