[fix] Scroll element into view race condition fix #11552
Merged
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Contributor
🎉 Snyk checks have passed. No issues have been found so far.✅ security/snyk check is complete. No issues have been found. (View Details) ✅ license/snyk check is complete. No issues have been found. (View Details) |
Contributor
✅ PR preview is ready!
|
Contributor
There was a problem hiding this comment.
Pull Request Overview
This pull request fixes a race condition encountered when scrolling target elements into view and introduces a new end-to-end test to verify anchor scrolling behavior.
- Refactors the StreamlitMarkdown component to remove the delayed scroll logic and instead use an immediate scroll call.
- Adds a new pytest marker and an end-to-end test in Playwright to verify anchor scrolling functionality.
- Updates the app fixture in the test configuration to support URL hash fragments.
Reviewed Changes
Copilot reviewed 3 out of 3 changed files in this pull request and generated no comments.
| File | Description |
|---|---|
| frontend/lib/src/components/shared/StreamlitMarkdown/StreamlitMarkdown.tsx | Refactors scroll behavior by removing an intermediate state and useEffect handler for scroll, directly scrolling the element when its ref is set. |
| e2e_playwright/st_markdown_test.py | Introduces a new test case to ensure that anchor scrolling brings the target header into view. |
| e2e_playwright/conftest.py | Modifies the app fixture to append a URL hash based on a pytest marker, enabling testing of hash-based navigation. |
Comments suppressed due to low confidence (2)
frontend/lib/src/components/shared/StreamlitMarkdown/StreamlitMarkdown.tsx:223
- Removing the delayed scroll mechanism may cause the element to be scrolled to before it is fully rendered, especially in edge cases. Please ensure that this immediate scroll behavior is verified across various page load timings.
scrollNodeIntoView(node)
e2e_playwright/conftest.py:308
- Review the URL construction in the app fixture to ensure that appending the hash fragment does not lead to unintended formatting (such as an extra slash) which could affect routing. Consider clarifying this behavior with inline comments or tests.
response = page.goto(f"http://localhost:{app_port}/{hash_fragment}")
4 tasks
sfc-gh-bnisco
commented
Jun 6, 2025
Collaborator
Author
There was a problem hiding this comment.
note: This was a bit of a drive-by change to better leverage JSX since I was already working in this file.
Contributor
|
Awesome! Can you add a test that this works with MPAv2 as well? Something like: import streamlit as st
def page1():
st.title("Page1")
st.write("""
Instructions:
* Click the button below.
* A new tab will open (that's OK)
* The app in that tab should scroll down to 'My title 2' -- but it won't!
""")
st.link_button("Open new tab", "/page2#my-title-2")
def page2():
st.title("Page2")
st.header("My title 1")
for _ in range(30):
st.text("blah " * 100)
st.header("My title 2")
for _ in range(30):
st.text("blah " * 100)
page = st.navigation(
[
st.Page(page1, title="Page1"),
st.Page(page2, title="Page2"),
]
)
page.run() |
70756bb to
5850f29
Compare
Collaborator
Author
|
@sfc-gh-tteixeira Good idea, just added a test for this! |
sfc-gh-tteixeira
approved these changes
Jun 9, 2025
Contributor
sfc-gh-tteixeira
left a comment
There was a problem hiding this comment.
I had no idea you could use ref that way!
sfc-gh-nbellante
approved these changes
Jun 9, 2025
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Describe your changes
GitHub Issue Link (if applicable)
Fixes #11551
Testing Plan
Contribution License Agreement
By submitting this pull request you agree that all contributions to this project are made under the Apache 2.0 license.