Fix XAML popup positioning and light dismiss in ScrollView (#15557) by Nitin-100 · Pull Request #15564 · microsoft/react-native-windows

Nitin-100 · 2026-01-21T07:49:53Z

Fix XAML popup positioning and light dismiss in ScrollView (#15557)

Description

This PR fixes Issue #15557 - "Pop-ups of Xaml controls need positioning and dismissal"

When XAML controls with popups (like ComboBox, DatePicker, TimePicker) are hosted inside a React Native ScrollView via ContentIslandComponentView, two bugs occur:

Bug 1 (Position): After scrolling, opening the popup shows it at the wrong position (offset by the scroll amount)
Bug 2 (Light Dismiss): Opening a popup and then scrolling leaves the popup floating at its original position instead of dismissing

Root Cause Analysis

Bug 1: Popup Position

ContentIslandComponentView uses ChildSiteLink.LocalToParentTransformMatrix for popup positioning
Issue 1: getClientRect() returns values in physical pixels (scaled by pointScaleFactor), but LocalToParentTransformMatrix expects logical pixels (DIPs)
Issue 2: Transform was updated asynchronously via UIDispatcher().Post(), causing race conditions where popup opened with stale transform values
Issue 3: Initial transform wasn't set before Connect(), causing wrong position even without scrolling

Bug 2: Light Dismiss on Scroll

XAML's native light dismiss behavior wasn't being triggered when scroll begins in React Native

Solution

Bug 1 Fix: Popup Position After Scroll

Convert to DIPs: Divide getClientRect() values by pointScaleFactor before setting LocalToParentTransformMatrix
Synchronous updates: Remove async UIDispatcher().Post() wrapper - update transform immediately
Initial transform: Set LocalToParentTransformMatrix in OnMounted() before Connect()
Scroll notification: ScrollViewComponentView fires LayoutMetricsChanged event when scroll position changes

Bug 2 Fix: Light Dismiss on Scroll (Optimized)

Added DismissPopupsRequest event to ContentIslandComponentView
Added ScrollBeginDrag event to ScrollViewComponentView
Optimized registration: During OnMounted(), ContentIslandComponentView walks up the tree once and registers for ScrollBeginDrag on all parent ScrollViewComponentView instances
When scroll begins, ScrollViewComponentView fires its ScrollBeginDrag event, which notifies only the registered ContentIslandComponentView instances
No tree walking on every scroll - registration happens once during mount
3rd party XAML components subscribe to DismissPopupsRequest and dismiss their own popups
Core remains XAML-agnostic - no XAML-specific code in the framework

Files Changed

Core Fix (vnext/Microsoft.ReactNative/)

Fabric/Composition/ContentIslandComponentView.cpp - DIP conversion, sync updates, register for parent ScrollView events during mount
Fabric/Composition/ContentIslandComponentView.h - Store scroll subscriptions
Fabric/Composition/ScrollViewComponentView.cpp - Fire LayoutMetricsChanged on scroll, expose ScrollBeginDrag event
Fabric/Composition/ScrollViewComponentView.h - ScrollBeginDrag event
CompositionComponentView.idl - Added DismissPopupsRequest event to ContentIslandComponentView, ScrollBeginDrag event to ScrollViewComponentView

Testing

Run the XamlPopupRepro sample in Playground
Scroll down in the ScrollView
Click a ComboBox to open dropdown - should appear at correct position (right at the button)
Open a ComboBox dropdown, then scroll - dropdown should close automatically

##Screenshot

testingFix.mp4

…#15557) - Add SetXamlRoot() API on ContentIslandComponentView for 3rd party XAML components - Add DismissPopups() using VisualTreeHelper.GetOpenPopupsForXamlRoot() - Fire LayoutMetricsChanged on scroll to update popup positions - Dismiss child ContentIsland popups when scroll begins - Add ComboBox sample component demonstrating the pattern - Add xamlPopupBug test sample for playground-composition

sundaramramaswamy

Please address comments.

vnext/Microsoft.ReactNative/CompositionComponentView.idl

…#15557) - Set LocalToParentTransformMatrix synchronously before Connect() to fix initial position - Fire LayoutMetricsChanged on scroll to update position after scrolling - Add DismissPopupsRequest event for 3P components to implement light dismiss - Update ComboBox sample to use event-based approach (core remains XAML-agnostic)

Issue microsoft#15557: Fix popup positioning for XAML controls in ScrollView Bug 1 (Position Fix): - Convert getClientRect() physical pixels to DIPs by dividing by pointScaleFactor - LocalToParentTransformMatrix expects logical pixels (DIPs), not physical pixels - Update transform synchronously instead of async to avoid race conditions - Set initial transform in OnMounted() before Connect() Bug 2 (Light Dismiss Fix): - Add DismissPopupsRequest event for 3P components to handle popup dismissal - ScrollView fires event when scroll begins via DismissChildContentIslandPopups() - Core remains XAML-agnostic - 3P components handle their own popups

sundaramramaswamy

Please revert formatting changes.

vnext/Microsoft.ReactNative/CompositionComponentView.idl

vnext/Microsoft.ReactNative/Fabric/Composition/ContentIslandComponentView.cpp

vnext/Microsoft.ReactNative/Fabric/Composition/ScrollViewComponentView.cpp

acoates-ms · 2026-01-27T16:39:27Z

Assuming LocalToParentTransformMatrix is pretty cheap, the LocalToParentTransformMatrix changes look good.

The light dismiss logic seems more wrong. This looks like we need additional hosting APIs from ContentIslands. ContentIslands should provide APIs to handle this kind of communication, and Xaml / RNW should talk to the new API. Xaml content islands should not have to know about RNW APIs - it breaks the ContentIsland encapsulation.

vnext/Microsoft.ReactNative/Fabric/Composition/ScrollViewComponentView.cpp

… scroll

Nitin-100 · 2026-01-30T15:17:17Z

@acoates-ms I have addressed all comments, please review it.

* docs: fix broken markdown links * Address reviewer feedback * Remove obsolete docs and clean conflict markers * Delete managedCodeGen.md --------- Co-authored-by: Protik Biswas <protikbiswas@microsoft.com> Co-authored-by: Vineeth <66076509+vineethkuttan@users.noreply.github.com>

* Use automationoption as frameworkbased for childsite * Change files * remove tokens associated with fragment based

Nitin-100 · 2026-02-03T08:08:18Z

Assuming LocalToParentTransformMatrix is pretty cheap, the LocalToParentTransformMatrix changes look good.

The light dismiss logic seems more wrong. This looks like we need additional hosting APIs from ContentIslands. ContentIslands should provide APIs to handle this kind of communication, and Xaml / RNW should talk to the new API. Xaml content islands should not have to know about RNW APIs - it breaks the ContentIsland encapsulation.

LocalToParentTransformMatrix: Yes, it's a cheap call - just sets a 4x4 matrix value. Confirmed working correctly.

Light dismiss architecture: I agree this isn't ideal from an encapsulation perspective. I've implemented an event-based approach that keeps RNW core XAML-agnostic:

ScrollViewComponentView exposes a ScrollBeginDrag event
ContentIslandComponentView registers with parent ScrollViews during mount (one-time tree walk)
ContentIslandComponentView exposes DismissPopupsRequest event for 3rd party components
No tree walking on every scroll - efficient O(listeners) per scroll

The 3rd party XAML component subscribes to DismissPopupsRequest and handles its own popup dismissal. RNW core doesn't call any XAML APIs directly.

You're right that ideally ContentIsland platform should provide this natively - perhaps via InputLightDismissAction or a new scroll-aware light dismiss API. Should I file a follow-up issue to track this request for the ContentIsland team?

For now, this workaround unblocks the immediate customer scenario while maintaining XAML-agnostic core code.

acoates-ms · 2026-02-03T17:50:19Z

vnext/Microsoft.ReactNative/Fabric/Composition/ScrollViewComponentView.cpp

+       m_layoutMetrics.frame.size.height},
+      m_layoutMetrics.pointScaleFactor};
+
+  m_layoutMetricsChangedEvent(


Firing a fake LayoutMetricsChanged event when the LayoutMetrics didn't change, seems wrong.

Instead, the ContentIslandComponentView could explicitly check for any scrollviews in the tree here:

react-native-windows/vnext/Microsoft.ReactNative/Fabric/Composition/ContentIslandComponentView.cpp

Line 75 in 25db080

m_layoutMetricChangedRevokers.push_back(view.LayoutMetricsChanged(

and listen for scroll position changes on any scrollviews in the parent tree.

ScrollViewComponentView should expose an ViewChanged event, similar to Xaml's ScrollViewer.

acoates-ms · 2026-02-03T17:54:35Z

vnext/Microsoft.ReactNative/CompositionComponentView.idl

+
+    // Issue #15557: Event fired when a parent ScrollView starts scrolling.
+    // 3rd party XAML components should subscribe to this event to dismiss any open popups.
+    event Windows.Foundation.EventHandler<IInspectable> DismissPopupsRequest;


I'd rather not expose events that we hope will be provided by content islands in the future. XamlComponents can do all of this external to RNW. They can register for the scroll events on all parent ScrollView's in their OnMount callbacks.

XAML component has NO visibility into RNW tree
A 3rd party XAML control (like ComboBox) running inside ContentIsland cannot "walk up the tree to find ScrollViews" because:
-It only knows about XAML APIs
-ScrollViewComponentView is a C++ class in RNW, not a XAML control
-There's no way for XAML code to discover or subscribe to RNW's ComponentViews

ContentIsland API has NO scroll events

ContentIslandComponentView is the BRIDGE
It has access to:
-The RNW component tree (can walk up to find ScrollViewComponentViews)
-The XAML content (via Connect())
-This is why the event must be exposed here

The DismissPopupsRequest event is the minimal API surface needed. If ContentIsland adds scroll-related dismiss APIs in the future, we can deprecate this event.

ContentIslandComponentView shouldn't know anything about XAML either.

In your example, ComboBoxComponentView is the component that knows about both RNW and Xaml. It can do the tree walk on mount to find the scrollviews, and register for scroll events.

Nitin-100 requested review from a team as code owners January 21, 2026 07:49

Nitin-100 requested a review from sundaramramaswamy January 21, 2026 07:50

Nitin-100 and others added 2 commits January 21, 2026 13:25

Merge branch 'main' into nitinc/fix-xaml-popup-positioning-15557

b29d678

Change files

3b3aaaf

sundaramramaswamy requested changes Jan 23, 2026

View reviewed changes

vnext/Microsoft.ReactNative/CompositionComponentView.idl Outdated Show resolved Hide resolved

vnext/Microsoft.ReactNative/CompositionComponentView.idl Show resolved Hide resolved

microsoft-github-policy-service bot added the Needs: Author Feedback The issue/PR needs activity from its author (label drives bot activity) label Jan 23, 2026

microsoft-github-policy-service bot removed the Needs: Author Feedback The issue/PR needs activity from its author (label drives bot activity) label Jan 25, 2026

Nitin Chaudhary and others added 3 commits January 25, 2026 19:08

Merge branch 'main' into nitinc/fix-xaml-popup-positioning-15557

6b10e7c

Apply clang-format

6d19597

Nitin-100 self-assigned this Jan 27, 2026

Nitin-100 requested a review from sundaramramaswamy January 27, 2026 09:44

sundaramramaswamy requested changes Jan 27, 2026

View reviewed changes

vnext/Microsoft.ReactNative/CompositionComponentView.idl Show resolved Hide resolved

microsoft-github-policy-service bot added the Needs: Author Feedback The issue/PR needs activity from its author (label drives bot activity) label Jan 27, 2026

Merge branch 'main' into nitinc/fix-xaml-popup-positioning-15557

161c2d2

microsoft-github-policy-service bot removed the Needs: Author Feedback The issue/PR needs activity from its author (label drives bot activity) label Jan 27, 2026

Revert IDL formatting, keep only DismissPopupsRequest event

e8cfe99

Nitin-100 force-pushed the nitinc/fix-xaml-popup-positioning-15557 branch from f0d7eb5 to e8cfe99 Compare January 27, 2026 14:27

acoates-ms reviewed Jan 27, 2026

View reviewed changes

vnext/Microsoft.ReactNative/CompositionComponentView.idl Show resolved Hide resolved

acoates-ms reviewed Jan 27, 2026

View reviewed changes

vnext/Microsoft.ReactNative/Fabric/Composition/ContentIslandComponentView.cpp Show resolved Hide resolved

acoates-ms reviewed Jan 27, 2026

View reviewed changes

vnext/Microsoft.ReactNative/Fabric/Composition/ScrollViewComponentView.cpp Outdated Show resolved Hide resolved

Merge branch 'main' into nitinc/fix-xaml-popup-positioning-15557

a82069e

protikbiswas100 reviewed Jan 28, 2026

View reviewed changes

vnext/Microsoft.ReactNative/Fabric/Composition/ScrollViewComponentView.cpp Outdated Show resolved Hide resolved

protikbiswas100 reviewed Jan 28, 2026

View reviewed changes

vnext/Microsoft.ReactNative/Fabric/Composition/ScrollViewComponentView.cpp Show resolved Hide resolved

Nitin Chaudhary added 2 commits January 28, 2026 22:57

Change files

b9a0fed

Optimize light dismiss: register during mount instead of tree walk on…

9c258b5

… scroll

Merge branch 'main' into nitinc/fix-xaml-popup-positioning-15557

f4e09ad

Nitin-100 requested a review from a team January 28, 2026 17:40

ssuraj2504 and others added 3 commits January 31, 2026 12:31

Bring Narrator focus to XAML island (microsoft#15611)

ab15212

* Use automationoption as frameworkbased for childsite * Change files * remove tokens associated with fragment based

Merge upstream/main - resolve conflict in ContentIslandComponentView.h

ac0b07c

Fix IDL: only add events without formatting changes

db01f95

Nitin-100 force-pushed the nitinc/fix-xaml-popup-positioning-15557 branch from 505103b to db01f95 Compare February 3, 2026 15:26

Merge branch 'main' into nitinc/fix-xaml-popup-positioning-15557

dc3de67

acoates-ms requested changes Feb 3, 2026

View reviewed changes

microsoft-github-policy-service bot added Needs: Author Feedback The issue/PR needs activity from its author (label drives bot activity) and removed Needs: Author Feedback The issue/PR needs activity from its author (label drives bot activity) labels Feb 3, 2026

Merge branch 'main' into nitinc/fix-xaml-popup-positioning-15557

93bccc7

Conversation

Nitin-100 commented Jan 21, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Fix XAML popup positioning and light dismiss in ScrollView (#15557)

Description

Root Cause Analysis

Bug 1: Popup Position

Bug 2: Light Dismiss on Scroll

Solution

Bug 1 Fix: Popup Position After Scroll

Bug 2 Fix: Light Dismiss on Scroll (Optimized)

Files Changed

Core Fix (vnext/Microsoft.ReactNative/)

Testing

Uh oh!

sundaramramaswamy left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

sundaramramaswamy left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

acoates-ms commented Jan 27, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Nitin-100 commented Jan 30, 2026

Uh oh!

Nitin-100 commented Feb 3, 2026

Uh oh!

acoates-ms Feb 3, 2026

Choose a reason for hiding this comment

Uh oh!

acoates-ms Feb 3, 2026

Choose a reason for hiding this comment

Uh oh!

Nitin-100 Feb 3, 2026

Choose a reason for hiding this comment

Uh oh!

acoates-ms Feb 5, 2026

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

6 participants

Nitin-100 commented Jan 21, 2026 •

edited

Loading

acoates-ms commented Jan 27, 2026 •

edited

Loading