Skip to content

Commit d7ba35e

Browse files
Nitin-100Nitin ChaudharyiamAbhi-916ssuraj2504protikbiswas100
authored
[0.82] cherry pick: Overflow Parity and fix xaml popup positioning 15557,15338 (#15663)
* Overflow implementation in Fabric as per Parity to Paper (#15338) * Implement overflow property support for Fabric architecture * Change files * Subject: ETW Provider Registration - Route to Existing 1DS Aria Tenant Hi OSG Instrumentation Team, I'm working on React Native Windows telemetry. We currently have: ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ EXISTING (working): - JavaScript CLI telemetry via 1DS SDK - Instrumentation Key: 49ff6d3ef12f4578a7b75a2573d9dba8-026332b2-2d50-452f-ad0d-50f921c97a9d-7145 - Data flows to: Aria → Kusto - Kusto cluster: [YOU NEED TO TELL ME THIS] NEW (want to add): - Native C++ telemetry via ETW/TraceLogging - Provider Name: Microsoft.ReactNativeWindows.Telemetry - Provider GUID: [WILL GENERATE] ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ QUESTION: Can you register the new ETW provider GUID and route it to the SAME Aria tenant as our existing 1DS instrumentation key? Goal: Have both JavaScript (1DS) and C++ (ETW) telemetry appear in the same Kusto database for unified querying. Is this possible? If yes, what info do you need from me? Thanks, Harini Malothu React Native Windows Team * Remove overflowTest.tsx - will attach separately in PR * Address review comment: make variables const * Ensure visual is created before accessing m_contentVisual * Fix formatting issues * Fix E2E crash: use try_as instead of as for IVisualInterop * Implement overflow:hidden with lazy m_contentVisual creation - Only create m_contentVisual when overflow:hidden is set (performance optimization) - Reparent children when m_contentVisual is created/removed - Use try_as instead of as for IVisualInterop to prevent crashes - Properly handle border radii for clipping * Fix crash: use try_as for IVisualInterop * Implement overflow clipping with m_contentVisual and try_as fix * Fix crash: use try_as in ComponentView::updateClippingPath * Implement lazy m_contentVisual creation for memory efficiency * Fix crash: skip m_contentVisual creation for custom builder visuals * Add null check for m_visual in applyShadowProps to prevent crash * Fix build: Use Visual() instead of m_visual in ComponentView::applyShadowProps * Fix E2E crash: Remove assert in Visual() that crashes before initialization * Fix E2E: Make m_contentVisual truly lazy - only create for overflow:hidden - Remove ensureContentVisual() calls from VisualToMountChildrenInto() and MountChildComponentView() - m_contentVisual is now only created in updateLayoutMetrics when getClipsContentToBounds() is true - Add null check in onThemeChanged() before accessing Visual() - Restore original ensureVisual() call in MountChildComponentView() * feat: Implement overflow:hidden for Fabric using on-demand children container Implement proper overflow:hidden clipping for the Fabric Composition renderer, matching iOS/Android behavior. Instead of clipping m_visual directly (which also clips borders and background), a dedicated m_childrenContainer visual is created on-demand as a child of m_visual, and only children are clipped. Visual Tree (with overflow:hidden): m_outerVisual m_visual (background, opacity, transform, border-radius clip) Border Visuals x N m_childrenContainer (created on demand, clipped to bounds) <children> Key design decisions: - m_childrenContainer is created lazily only when overflow:hidden is set - Existing children are moved from m_visual into m_childrenContainer - Once created, m_childrenContainer is never destroyed (clip is just removed if overflow changes back to visible) - Clipping uses outer border radii via D2D path geometry, matching iOS - ScrollView overrides updateChildrenClippingPath as no-op since it manages its own visual tree via m_scrollVisual and inherently clips content Also cleans up: - Removed unnecessary null-checks on Visual() (ensureVisual guarantees it) - Removed shadow mask workaround code (not related to overflow) - Removed InsetClip-based overflow handling from updateProps - Added assert(m_visual) in Visual() accessor - Simplified updateClippingPath to only handle border-radius clipping * Move shadow to OuterVisual, use RelativeSizeWithOffset for children container * lint,format fixes * update e2e snapshots for overflow changes * Revert "update e2e snapshots for overflow changes" This reverts commit 5e07f75. * update e2e snapshots for overflow changes --------- Co-authored-by: Nitin Chaudhary <nitchaudhary@microsoft.com> Co-authored-by: Abhijeet Jha <74712637+iamAbhi-916@users.noreply.github.com> * Fix XAML popup positioning and light dismiss in ScrollView (#15557) (#15564) * Fix XAML popup positioning and light dismiss in ScrollView (#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 * Change files * Fix XAML popup positioning and light dismiss in ScrollView (#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) * Fix XAML popup positioning - convert to DIPs and update synchronously Issue #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 * Apply clang-format * Revert IDL formatting, keep only DismissPopupsRequest event * Change files * Optimize light dismiss: register during mount instead of tree walk on scroll * docs: fix broken markdown links in pipeline (#15594) * 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> * Bring Narrator focus to XAML island (#15611) * Use automationoption as frameworkbased for childsite * Change files * remove tokens associated with fragment based * Fix IDL: only add events without formatting changes * Address review: replace fake LayoutMetricsChanged with ViewChanged event, move light dismiss to 3P component Addresses acoates-ms review comments: 1. Replace FireLayoutMetricsChangedForScrollPositionChange with proper ViewChanged event on ScrollViewComponentView (similar to XAML ScrollViewer.ViewChanged) 2. Remove DismissPopupsRequest from ContentIslandComponentView - light dismiss logic moved to ComboBoxComponentView which walks parent tree on mount 3. ContentIslandComponentView subscribes to ViewChanged for transform updates 4. 3P component (ComboBox) subscribes to ViewChanged for popup dismiss * Apply formatting fixes and add ComboBox codegen * Fix syntax error: use correct codegen type ComboBoxEventEmitter::OnSelectionChanged --------- Co-authored-by: Nitin Chaudhary <nitchaudhary@microsoft.com> Co-authored-by: Suraj Raykar <168889106+ssuraj2504@users.noreply.github.com> Co-authored-by: Protik Biswas <protikbiswas@microsoft.com> Co-authored-by: Vineeth <66076509+vineethkuttan@users.noreply.github.com> * Apply clang-format --------- Co-authored-by: Nitin Chaudhary <nitchaudhary@microsoft.com> Co-authored-by: Abhijeet Jha <74712637+iamAbhi-916@users.noreply.github.com> Co-authored-by: Suraj Raykar <168889106+ssuraj2504@users.noreply.github.com> Co-authored-by: Protik Biswas <protikbiswas@microsoft.com> Co-authored-by: Vineeth <66076509+vineethkuttan@users.noreply.github.com>
1 parent 4e7874c commit d7ba35e

28 files changed

Lines changed: 1502 additions & 51 deletions

‎change/@react-native-windows-automation-0a641d65-6bc9-4769-8666-f856ff15f040.json‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
{
2+
"type": "prerelease",
3+
"comment": "Fix XAML popup positioning and light dismiss in ScrollView (#15557)",
4+
"packageName": "@react-native-windows/automation",
5+
"email": "nitchaudhary@microsoft.com",
6+
"dependentChangeType": "patch"
7+
}

‎change/@react-native-windows-automation-channel-e7ad73ac-7704-441b-81a3-2d8f97ece377.json‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
{
2+
"type": "prerelease",
3+
"comment": "Fix XAML popup positioning and light dismiss in ScrollView (#15557)",
4+
"packageName": "@react-native-windows/automation-channel",
5+
"email": "nitchaudhary@microsoft.com",
6+
"dependentChangeType": "patch"
7+
}

‎change/@react-native-windows-automation-commands-6b4b918c-021a-41a9-8eac-5ed58b0cec22.json‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
{
2+
"type": "prerelease",
3+
"comment": "Fix XAML popup positioning and light dismiss in ScrollView (#15557)",
4+
"packageName": "@react-native-windows/automation-commands",
5+
"email": "nitchaudhary@microsoft.com",
6+
"dependentChangeType": "patch"
7+
}

‎change/react-native-windows-83ceb93b-b350-41ed-a00b-0cd4927d42cb.json‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
{
2+
"comment": "Fix XAML popup positioning and light dismiss in ScrollView (#15557)",
3+
"type": "prerelease",
4+
"packageName": "react-native-windows",
5+
"email": "nitchaudhary@microsoft.com",
6+
"dependentChangeType": "patch"
7+
}

‎change/react-native-windows-8d24c2d8-08f9-4612-a46d-8bf25b0f020d.json‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
{
2+
"type": "prerelease",
3+
"comment": "Implement overflow property support for Fabric architecture",
4+
"packageName": "react-native-windows",
5+
"email": "nitchaudhary@microsoft.com",
6+
"dependentChangeType": "patch"
7+
}

‎packages/e2e-test-app-fabric/test/__snapshots__/FlatListComponentTest.test.ts.snap‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -280,6 +280,13 @@ exports[`FlatList Tests A FlatList can be filtered by a key word 1`] = `
280280
"Offset": "0, 0, 0",
281281
"Size": "50, 50",
282282
"Visual Type": "SpriteVisual",
283+
"__Children": [
284+
{
285+
"Offset": "0, 0, 0",
286+
"Size": "0, 0",
287+
"Visual Type": "SpriteVisual",
288+
},
289+
],
283290
},
284291
],
285292
},

‎packages/e2e-test-app-fabric/test/__snapshots__/HomeUIADump.test.ts.snap‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -76,6 +76,13 @@ exports[`Home UIA Tree Dump APIs Tab 1`] = `
7676
"Offset": "0, 0, 0",
7777
"Size": "30, 20",
7878
"Visual Type": "SpriteVisual",
79+
"__Children": [
80+
{
81+
"Offset": "0, 0, 0",
82+
"Size": "0, 0",
83+
"Visual Type": "SpriteVisual",
84+
},
85+
],
7986
},
8087
],
8188
},
@@ -1107,6 +1114,13 @@ exports[`Home UIA Tree Dump Components Tab 1`] = `
11071114
"Offset": "0, 0, 0",
11081115
"Size": "20, 20",
11091116
"Visual Type": "SpriteVisual",
1117+
"__Children": [
1118+
{
1119+
"Offset": "0, 0, 0",
1120+
"Size": "0, 0",
1121+
"Visual Type": "SpriteVisual",
1122+
},
1123+
],
11101124
},
11111125
],
11121126
},

0 commit comments

Comments
 (0)