Skip to content

Implementation for onContentSizeChange property for TextInput for fabric #14479

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
satkh wants to merge 8 commits into from
Closed

Implementation for onContentSizeChange property for TextInput for fabric #14479

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
bbe8b68
Implement the onContentSizeChange property for the fabric implementat…
satkh Apr 3, 2025
58ce921
Revert "Implement the onContentSizeChange property for the fabric imp…
satkh Apr 3, 2025
0a4efcf
Merge branch 'main' of https://github.com/microsoft/react-native-windows
satkh Apr 3, 2025
d9d3292
Implemention for TextInput onContentSizeChange property for the fabric
satkh Apr 3, 2025
15472f8
adding lint and format changes
satkh Apr 3, 2025
1c37812
Change files
satkh Apr 3, 2025
254e821
Fixing lint errors
satkh Apr 4, 2025
20ec6c2
Merge branch 'main' into user/satkh/textInput_onContentSizeChangeProp_1
satkh Apr 4, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
7 changes: 7 additions & 0 deletions change/react-native-windows-ac5a5021-6294-47db-b9ef-14f49d38b108.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
{
"type": "none",
"comment": "Implement the onContentSizeChange property for the fabric implementation of TextInput.",
"packageName": "react-native-windows",
"email": "satkh@microsoft.com",
"dependentChangeType": "none"
}
15 changes: 15 additions & 0 deletions packages/playground/Samples/textinput.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -41,6 +41,10 @@ export default class Bootstrap extends React.Component<{}, any> {
console.log('keyboardDidHide');
};

setHeightAndWidth = (height: number, width: number) => {
console.log(' onContentSizeChange height: ' + height + ' width: ' + width);
};

componentWillUnmount() {
this.didShowEmitterSubscription.remove();
this.didHideEmitterSubscription.remove();
Expand Down Expand Up @@ -148,6 +152,17 @@ export default class Bootstrap extends React.Component<{}, any> {
style={[styles.input, {letterSpacing: 5.1}]}
placeholder={'Letter Spacing'}
/>
<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
Expand Down
9 changes: 9 additions & 0 deletions vnext/Microsoft.ReactNative/Fabric/Composition/TextInput/WindowsTextInputComponentView.cpp
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1132,6 +1132,15 @@ 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;

@acoates-ms acoates-ms Apr 4, 2025

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I dont think this is the content size. This is the size of the textinput - But I think onContentSize is supposed to be the size of the text content. So if there is more text that fits within the TextInput bounds, and the TextInput starts scrolling, then onContentSize would report a value larger than the layoutMetrics.frame.size.

@acoates-ms acoates-ms Apr 4, 2025

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yeah, verified in Expo Snack - In 2 line multiline textinput, as I add more and more lines of text the contentSize increases even through the textinput itself does not increase in size.

onContentSizeChangeArgs.contentSize.width = layoutMetrics.frame.size.width * layoutMetrics.pointScaleFactor;
onContentSizeChangeArgs.contentSize.height = layoutMetrics.frame.size.height * layoutMetrics.pointScaleFactor;
emitter->onContentSizeChange(onContentSizeChangeArgs);
}
}

m_imgWidth = newWidth;
Expand Down