Skip to content

Commit ea42d2b

Browse files
jasozhfacebook-github-bot
authored andcommitted
Fix uncontrolled multiline TextInput not expanding on iOS (#59417)
Summary: Fixes an issue where on iOS, multiline expanding TextInputs do not expand if the input starts off as empty and uncontrolled. ### Root Cause When a multiline TextInput on iOS is provided a `value` and `onChange()` prop, as shown in the [React Native docs](https://reactnative.dev/docs/textinput), the input grows as expected. However, uncontrolled inputs do not grow past the first initial line. On mount, `BaseTextInputShadowNode::updateStateIfNeeded()` writes state only if the text changes, so the first state write is skipped for empty, uncontrolled inputs. As a result, `TextAttributes` keeps the default `fontSizeMultiplier = NaN` which is carried over since iOS copies the previous state for subsequent keystrokes. During measurement, `attributedStringBoxToMeasure()` sees that the current multiplier doesn't match the stored multiplier of NaN and falls back to `props.text` which is empty for uncontrolled inputs. This causes the input to stay one-line tall. ### This PR Modify `BaseTextInputShadowNode::updateStateIfNeeded()` to update the state if base text attributes differ. On mount, the default font multiplier of NaN now differs from the real multiplier, so a state update occurs and the text field grows normally. Changelog: [iOS][Fixed] - Fix multiline TextInput not growing with its content when uncontrolled and initially empty Reviewed By: vzaidman Differential Revision: D127048714
1 parent 67219ec commit ea42d2b

1 file changed

Lines changed: 3 additions & 1 deletion

File tree

‎packages/react-native/ReactCommon/react/renderer/components/textinput/BaseTextInputShadowNode.h‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -157,7 +157,9 @@ class BaseTextInputShadowNode
157157
const auto &stateData = BaseShadowNode::getStateData();
158158
const auto &reactTreeAttributedString = getAttributedString(layoutContext);
159159

160-
if (stateData.reactTreeAttributedString.isContentEqual(reactTreeAttributedString)) {
160+
if (stateData.reactTreeAttributedString.isContentEqual(reactTreeAttributedString) &&
161+
stateData.reactTreeAttributedString.getBaseTextAttributes() ==
162+
reactTreeAttributedString.getBaseTextAttributes()) {
161163
return;
162164
}
163165

0 commit comments

Comments
 (0)