Skip to content

Fix(iOS) TextInput onContentSizeChange not firing on text change on iOS #59447

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

Open
amerllica wants to merge 3 commits into
base: main
Choose a base branch
from
Open

Fix(iOS) TextInput onContentSizeChange not firing on text change on iOS #59447

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
117eb57
Fix TextInput onContentSizeChange not firing on text change on iOS
amerllica Oct 24, 2026
8317f8c
Add fixed height content size TextInput example to RNTester
amerllica Oct 24, 2026
c6617ef
Skip TextInput content size event from text changes before first layo…
amerllica Oct 24, 2026
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
33 changes: 29 additions & 4 deletions .../react-native/React/Fabric/Mounting/ComponentViews/TextInput/RCTTextInputComponentView.mm
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -395,10 +395,7 @@ - (void)updateLayoutMetrics:(const LayoutMetrics &)layoutMetrics
_backedTextInputView.textContainerInset =
RCTUIEdgeInsetsFromEdgeInsets(layoutMetrics.contentInsets - layoutMetrics.borderWidth);

if (!CGSizeEqualToSize(_previousContentSize, _backedTextInputView.contentSize) && _eventEmitter) {
_previousContentSize = _backedTextInputView.contentSize;
static_cast<const TextInputEventEmitter &>(*_eventEmitter).onContentSizeChange([self _textInputMetrics]);
}
[self _emitContentSizeChangeIfNeeded];
}

- (void)prepareForRecycle
Expand All @@ -415,6 +412,7 @@ - (void)prepareForRecycle
_backedTextInputView.inputAccessoryViewID = nil;
_backedTextInputView.inputAccessoryView = nil;
_hasInputAccessoryView = false;
_previousContentSize = CGSizeZero;
[_backedTextInputView resignFirstResponder];
}

Expand Down Expand Up @@ -565,6 +563,8 @@ - (void)textInputDidChange
const auto &textInputEventEmitter = static_cast<const TextInputEventEmitter &>(*_eventEmitter);
textInputEventEmitter.onChange([self _textInputMetrics]);
}

[self _emitContentSizeChangeAfterTextChange];
}

- (void)textInputDidChangeSelection
Expand Down Expand Up @@ -803,6 +803,30 @@ - (void)handleInputAccessoryDoneButton
};
}

- (void)_emitContentSizeChangeAfterTextChange
{
if (![self _hasEmittedContentSize]) {
return;
}
[_backedTextInputView layoutIfNeeded];
[self _emitContentSizeChangeIfNeeded];
}

- (BOOL)_hasEmittedContentSize
{
return !CGSizeEqualToSize(_previousContentSize, CGSizeZero);
}

- (void)_emitContentSizeChangeIfNeeded
{
CGSize contentSize = _backedTextInputView.contentSize;
if (CGSizeEqualToSize(_previousContentSize, contentSize) || !_eventEmitter) {
return;
}
_previousContentSize = contentSize;
static_cast<const TextInputEventEmitter &>(*_eventEmitter).onContentSizeChange([self _textInputMetrics]);
}

- (void)_updateState
{
if (!_state) {
Expand Down Expand Up @@ -881,6 +905,7 @@ - (void)_setAttributedString:(NSAttributedString *)attributedString
[self _restoreTextSelectionAndIgnoreCaretChange:YES];
[self _updateTypingAttributes];
_lastStringStateWasUpdatedWith = attributedString;
[self _emitContentSizeChangeAfterTextChange];
}

// Ensure that newly typed text will inherit any custom attributes. We follow the logic of RN Android, where attributes
Expand Down
13 changes: 13 additions & 0 deletions packages/rn-tester/js/examples/TextInput/TextInputSharedExamples.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1192,6 +1192,19 @@ module.exports = [
);
},
},
{
title: 'Content size change with fixed height',
name: 'contentSizeChangeFixedHeight',
render: function (): React.Node {
return (
<View style={styles.wrappedText}>
<AutogrowingTextInputExample
style={{height: 60, backgroundColor: '#eeeeee'}}
/>
</View>
);
},
},
{
title: 'Drag and drop',
render: function (): React.Node {
Expand Down
Loading