Implementation for onContentSizeChange property for TextInput for fabric

[satkh]

Description

Type of Change

• Bug fix (non-breaking change which fixes an issue)

Why

Implementation for onContentSizeChange property for TextInput for fabric
This property was available in RNW Paper via TextInputViewManager.

See https://reactnative.dev/docs/textinput#oncontentsizechange for details.

Resolves #13125

What

Implemented onContentSizeChange property for TextInput for fabric

Screenshots

oncontentsizeChanged_textinput_1.mp4

Testing

Tested using playground-composition App,

1. Adding text till it over flows the input text size.
2. Dragging the app window (increases the width of the input text component)

Changelog

Yes

Add a brief summary of the change to use in the release notes for the next release.

• Implementation for onContentSizeChange property for TextInput for fabric

Microsoft Reviewers: Open in CodeFlow

[anupriya13]

Can you cross check on the lint issue pipeline?

[anupriya13]

Just for clarification, should it be invoked on every text character input (everytime you typed the character 'h') as the content or the box height and width is the content that triggers on every new line?

[anupriya13]

If the content is triggered on box dimension change then looks good! Please do double check once on my previous comment.

[satkh]

Just for clarification, should it be invoked on every text character input (everytime you typed the character 'h') as the content or the box height and width is the content that triggers on every new line?

It should be any kind of change to Text Input component. On paper this event is triggered even when you re size (drag) the app window. I think it should be based on any size change not necessarily when "change in size due to text overflow". I am open for better approaches

[chiaramooney]

Just for clarification, should it be invoked on every text character input (everytime you typed the character 'h') as the content or the box height and width is the content that triggers on every new line?

Did some testing using Expo snack to verify the behavior on Android/iOS and looks like the event should be triggered when the TextInput box size changes or if the content size grows beyond what fits in the TextInput box and now must be scrolled in either direction.

[chiaramooney]

Looks like you have some linting errors. Running yarn lint:fix from the root of the repo should fix this.

[chiaramooney]

👍

Happy to approve. If you have the capacity to add a test case to validate this new functionality that would be great. I believe Anupriya has learned how to add tests to the repo.

[satkh]

👍

Happy to approve. If you have the capacity to add a test case to validate this new functionality that would be great. I believe Anupriya has learned how to add tests to the repo.

Will learn and add test cases.

[satkh]

Looks like you have some linting errors. Running yarn lint:fix from the root of the repo should fix this.

Fixed the linting errors and pipelines are green now.

[satkh]

👍

Happy to approve. If you have the capacity to add a test case to validate this new functionality that would be great. I believe Anupriya has learned how to add tests to the repo.

Can we add the tests part of this issue: #11309 ?

[acoates-ms]

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]

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.

[acoates-ms]

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.