Skip to content

Fix "Select" scroll propagation across iframe boundaries#38

Open
isrijanrana wants to merge 1 commit intoopenai:mainfrom
isrijanrana:patch-1
Open

Fix "Select" scroll propagation across iframe boundaries#38
isrijanrana wants to merge 1 commit intoopenai:mainfrom
isrijanrana:patch-1

Conversation

@isrijanrana
Copy link

@isrijanrana isrijanrana commented Mar 6, 2026

Problem

When a <Select> dropdown component opens inside a ChatGPT App (rendered within an iframe), the ChatGPT conversation container shifts its scroll position by about ~32px.

Observed Behaviour

The conversation scrolls up by ~32px when the dropdown opens. After selecting an option and reopening the dropdown, the conversation scrolls back down. Each subsequent open/close cycle alternates the scroll position, causing a repeated back-and-forth jump in the conversation view.

This happens because scrollIntoView() propagates across iframe boundaries — the three scrollIntoView calls in CustomSelectMenu reach beyond the iframe and scroll ancestor containers on the host page.


How to reproduce

  1. Build an App that renders a widget containing <Select>.
  2. Open the app in ChatGPT — the widget loads inside an iframe.
  3. Click the dropdown trigger.
  4. The ChatGPT conversation scrolls up ~32px. Select an option and click the trigger again — the conversation scrolls back down.

Diagnostic evidence captured from the ChatGPT host page console:

[found scroller] <DIV.@-sn/main:[scrollbar-gutter:stable_both-edges]> scrollTop: 3619
[found scroller] <DIV.@-sn/main:[scrollbar-gutter:stable_both-edges]> scrollTop: 3587
[found scroller] <DIV.@-sn/main:[scrollbar-gutter:stable_both-edges]> scrollTop: 3619

Fix

Replace scrollIntoView with a scrollIntoContainer helper that adjusts scrollTop on listRef.current directly, keeping the scroll scoped to the dropdown's own list container. This cannot propagate to the host page.

This is consistent with:

  • The existing scroll reset pattern (listRef.current.scrollTop = 0).
  • The focus({ preventScroll: true }) call which already avoids native scroll side effects.

Call sites changed

Location Purpose
highlightOption Keyboard arrow navigation
Typeahead handler Character match scroll
Mount effect Scroll selected option into view on open (block: "center")

Replace native `scrollIntoView` with a container-scoped `scrollIntoContainer` helper that uses manual `scrollTop` adjustment, preventing scroll events from propagating to ancestor frames when the `Select` dropdown is rendered inside an embedded widget.
@isrijanrana isrijanrana changed the title Fix Select scroll propagation across iframe boundaries Fix "Select" scroll propagation across iframe boundaries Mar 6, 2026
@isrijanrana
Copy link
Author

Hey @tylersmith-openai could you please take a look at this PR? Thanks!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant