From bbe8b6857ca941028917cbf38511af372ca83d57 Mon Sep 17 00:00:00 2001 From: Satya Sameer K H <satkh@microsoft.com> Date: Thu, 3 Apr 2025 16:35:53 +0530 Subject: [PATCH 1/5] Implement the onContentSizeChange property for the fabric implementation of TextInput. --- packages/playground/Samples/textinput.tsx | 11 +++++++++++ .../TextInput/WindowsTextInputComponentView.cpp | 10 ++++++++++ 2 files changed, 21 insertions(+) diff --git a/packages/playground/Samples/textinput.tsx b/packages/playground/Samples/textinput.tsx index f2d1a2fbbda..125a36b4b72 100644 --- a/packages/playground/Samples/textinput.tsx +++ b/packages/playground/Samples/textinput.tsx @@ -41,6 +41,10 @@ export default class Bootstrap extends React.Component<{}, any> { console.log('keyboardDidHide'); }; + setHeightAndWidth = (height, width) => { + console.log("Content size changed, height: " + height + " width: " + width); + }; + componentWillUnmount() { this.didShowEmitterSubscription.remove(); this.didHideEmitterSubscription.remove(); @@ -144,6 +148,13 @@ export default class Bootstrap extends React.Component<{}, any> { clearTextOnFocus={true} placeholder={'Clear text on focus'} /> + <TextInput + style={styles.input} + multiline + onContentSizeChange={(event) => this.setHeightAndWidth(event.nativeEvent.contentSize.height, + event.nativeEvent.contentSize.width)} + placeholder={'content size change'} + /> <Button title={ this.state.passwordHidden diff --git a/vnext/Microsoft.ReactNative/Fabric/Composition/TextInput/WindowsTextInputComponentView.cpp b/vnext/Microsoft.ReactNative/Fabric/Composition/TextInput/WindowsTextInputComponentView.cpp index c5b5e871244..7560c46b96b 100644 --- a/vnext/Microsoft.ReactNative/Fabric/Composition/TextInput/WindowsTextInputComponentView.cpp +++ b/vnext/Microsoft.ReactNative/Fabric/Composition/TextInput/WindowsTextInputComponentView.cpp @@ -1130,6 +1130,16 @@ void WindowsTextInputComponentView::updateLayoutMetrics( if (newWidth != m_imgWidth || newHeight != m_imgHeight) { m_drawingSurface = nullptr; // Invalidate surface if we get a size change + + // call onContentSizeChange event for multiline TextInput + if (m_eventEmitter && !m_comingFromJS && m_multiline) { + auto emitter = std::static_pointer_cast<const facebook::react::WindowsTextInputEventEmitter>(m_eventEmitter); + facebook::react::WindowsTextInputEventEmitter::OnContentSizeChange onContentSizeChangeArgs; + onContentSizeChangeArgs.contentSize.width = layoutMetrics.frame.size.width * layoutMetrics.pointScaleFactor; + onContentSizeChangeArgs.contentSize.height = layoutMetrics.frame.size.height * layoutMetrics.pointScaleFactor; + emitter->onContentSizeChange(onContentSizeChangeArgs); + } + } m_imgWidth = newWidth; From 58ce921089d58b51a064c385e62a70a370df539a Mon Sep 17 00:00:00 2001 From: Satya Sameer K H <satkh@microsoft.com> Date: Thu, 3 Apr 2025 16:54:37 +0530 Subject: [PATCH 2/5] Revert "Implement the onContentSizeChange property for the fabric implementation of TextInput." This reverts commit bbe8b6857ca941028917cbf38511af372ca83d57. --- packages/playground/Samples/textinput.tsx | 11 ----------- .../TextInput/WindowsTextInputComponentView.cpp | 10 ---------- 2 files changed, 21 deletions(-) diff --git a/packages/playground/Samples/textinput.tsx b/packages/playground/Samples/textinput.tsx index 125a36b4b72..f2d1a2fbbda 100644 --- a/packages/playground/Samples/textinput.tsx +++ b/packages/playground/Samples/textinput.tsx @@ -41,10 +41,6 @@ export default class Bootstrap extends React.Component<{}, any> { console.log('keyboardDidHide'); }; - setHeightAndWidth = (height, width) => { - console.log("Content size changed, height: " + height + " width: " + width); - }; - componentWillUnmount() { this.didShowEmitterSubscription.remove(); this.didHideEmitterSubscription.remove(); @@ -148,13 +144,6 @@ export default class Bootstrap extends React.Component<{}, any> { clearTextOnFocus={true} placeholder={'Clear text on focus'} /> - <TextInput - style={styles.input} - multiline - onContentSizeChange={(event) => this.setHeightAndWidth(event.nativeEvent.contentSize.height, - event.nativeEvent.contentSize.width)} - placeholder={'content size change'} - /> <Button title={ this.state.passwordHidden diff --git a/vnext/Microsoft.ReactNative/Fabric/Composition/TextInput/WindowsTextInputComponentView.cpp b/vnext/Microsoft.ReactNative/Fabric/Composition/TextInput/WindowsTextInputComponentView.cpp index 7560c46b96b..c5b5e871244 100644 --- a/vnext/Microsoft.ReactNative/Fabric/Composition/TextInput/WindowsTextInputComponentView.cpp +++ b/vnext/Microsoft.ReactNative/Fabric/Composition/TextInput/WindowsTextInputComponentView.cpp @@ -1130,16 +1130,6 @@ void WindowsTextInputComponentView::updateLayoutMetrics( if (newWidth != m_imgWidth || newHeight != m_imgHeight) { m_drawingSurface = nullptr; // Invalidate surface if we get a size change - - // call onContentSizeChange event for multiline TextInput - if (m_eventEmitter && !m_comingFromJS && m_multiline) { - auto emitter = std::static_pointer_cast<const facebook::react::WindowsTextInputEventEmitter>(m_eventEmitter); - facebook::react::WindowsTextInputEventEmitter::OnContentSizeChange onContentSizeChangeArgs; - onContentSizeChangeArgs.contentSize.width = layoutMetrics.frame.size.width * layoutMetrics.pointScaleFactor; - onContentSizeChangeArgs.contentSize.height = layoutMetrics.frame.size.height * layoutMetrics.pointScaleFactor; - emitter->onContentSizeChange(onContentSizeChangeArgs); - } - } m_imgWidth = newWidth; From 0cb49f339d6599c72c094373b8c49408e03b511d Mon Sep 17 00:00:00 2001 From: Satya Sameer K H <satkh@microsoft.com> Date: Thu, 17 Apr 2025 11:05:24 +0530 Subject: [PATCH 3/5] Draft Implemenation --- packages/playground/Samples/accessible.tsx | 3 +++ .../Components/View/ReactNativeViewAttributes.windows.js | 1 + vnext/src-win/Libraries/Components/View/View.windows.js | 4 ++-- 3 files changed, 6 insertions(+), 2 deletions(-) diff --git a/packages/playground/Samples/accessible.tsx b/packages/playground/Samples/accessible.tsx index 73468208fcd..9db78db9324 100644 --- a/packages/playground/Samples/accessible.tsx +++ b/packages/playground/Samples/accessible.tsx @@ -117,6 +117,9 @@ export default class Bootstrap extends React.Component< <Text style={styles.text}>TEST setAccessibilityFocus</Text> </TouchableHighlight> <TextInput ref={this.myElement} /> + <View style={styles.item} accessibilityElementsHidden={true }> + <Text style={styles.text}>TEST Accessibility Hidden </Text> + </View> </View> ); } diff --git a/vnext/src-win/Libraries/Components/View/ReactNativeViewAttributes.windows.js b/vnext/src-win/Libraries/Components/View/ReactNativeViewAttributes.windows.js index 497342cf605..2eef21c52a0 100644 --- a/vnext/src-win/Libraries/Components/View/ReactNativeViewAttributes.windows.js +++ b/vnext/src-win/Libraries/Components/View/ReactNativeViewAttributes.windows.js @@ -25,6 +25,7 @@ const UIView = { accessibilityShowsLargeContentViewer: true, accessibilityLargeContentTitle: true, importantForAccessibility: true, + accessibilityElementsHidden: false, nativeID: true, testID: true, renderToHardwareTextureAndroid: true, diff --git a/vnext/src-win/Libraries/Components/View/View.windows.js b/vnext/src-win/Libraries/Components/View/View.windows.js index 6b6fa350e4c..9f9025dd8bc 100644 --- a/vnext/src-win/Libraries/Components/View/View.windows.js +++ b/vnext/src-win/Libraries/Components/View/View.windows.js @@ -272,7 +272,7 @@ const View: component( // [Windows accessible={_accessible} children={ - importantForAccessibility === 'no-hide-descendants' + importantForAccessibility === 'no-hide-descendants' || accessibilityElementsHidden === true ? childrenWithImportantForAccessibility(otherProps.children) : otherProps.children } @@ -327,7 +327,7 @@ const View: component( // [Windows accessible={_accessible} children={ - importantForAccessibility === 'no-hide-descendants' + importantForAccessibility === 'no-hide-descendants' || accessibilityElementsHidden === true ? childrenWithImportantForAccessibility(otherProps.children) : otherProps.children } From af72eaf584eb534c0edfcada8eeb1891fc1bc23a Mon Sep 17 00:00:00 2001 From: Satya Sameer K H <satkh@microsoft.com> Date: Thu, 17 Apr 2025 11:08:30 +0530 Subject: [PATCH 4/5] Lint errors --- packages/playground/Samples/accessible.tsx | 4 ++-- vnext/src-win/Libraries/Components/View/View.windows.js | 6 ++++-- 2 files changed, 6 insertions(+), 4 deletions(-) diff --git a/packages/playground/Samples/accessible.tsx b/packages/playground/Samples/accessible.tsx index 9db78db9324..c28fe85b5eb 100644 --- a/packages/playground/Samples/accessible.tsx +++ b/packages/playground/Samples/accessible.tsx @@ -117,8 +117,8 @@ export default class Bootstrap extends React.Component< <Text style={styles.text}>TEST setAccessibilityFocus</Text> </TouchableHighlight> <TextInput ref={this.myElement} /> - <View style={styles.item} accessibilityElementsHidden={true }> - <Text style={styles.text}>TEST Accessibility Hidden </Text> + <View style={styles.item} accessibilityElementsHidden={true}> + <Text style={styles.text}>TEST Accessibility Hidden </Text> </View> </View> ); diff --git a/vnext/src-win/Libraries/Components/View/View.windows.js b/vnext/src-win/Libraries/Components/View/View.windows.js index 9f9025dd8bc..f6619cb47a9 100644 --- a/vnext/src-win/Libraries/Components/View/View.windows.js +++ b/vnext/src-win/Libraries/Components/View/View.windows.js @@ -272,7 +272,8 @@ const View: component( // [Windows accessible={_accessible} children={ - importantForAccessibility === 'no-hide-descendants' || accessibilityElementsHidden === true + importantForAccessibility === 'no-hide-descendants' || + accessibilityElementsHidden === true ? childrenWithImportantForAccessibility(otherProps.children) : otherProps.children } @@ -327,7 +328,8 @@ const View: component( // [Windows accessible={_accessible} children={ - importantForAccessibility === 'no-hide-descendants' || accessibilityElementsHidden === true + importantForAccessibility === 'no-hide-descendants' || + accessibilityElementsHidden === true ? childrenWithImportantForAccessibility(otherProps.children) : otherProps.children } From 6d556034e8981d8d348818df763de0879edf8732 Mon Sep 17 00:00:00 2001 From: Satya Sameer K H <satkh@microsoft.com> Date: Thu, 17 Apr 2025 11:10:58 +0530 Subject: [PATCH 5/5] Change files --- ...ative-windows-b12cdfc7-1f09-4dfd-912a-551ec96fd65b.json | 7 +++++++ 1 file changed, 7 insertions(+) create mode 100644 change/react-native-windows-b12cdfc7-1f09-4dfd-912a-551ec96fd65b.json diff --git a/change/react-native-windows-b12cdfc7-1f09-4dfd-912a-551ec96fd65b.json b/change/react-native-windows-b12cdfc7-1f09-4dfd-912a-551ec96fd65b.json new file mode 100644 index 00000000000..9ce0f2a8005 --- /dev/null +++ b/change/react-native-windows-b12cdfc7-1f09-4dfd-912a-551ec96fd65b.json @@ -0,0 +1,7 @@ +{ + "type": "prerelease", + "comment": "Draft Implemenation", + "packageName": "react-native-windows", + "email": "satkh@microsoft.com", + "dependentChangeType": "patch" +}