Fix incorrect measurement of TextInput (#42655)

Summary:
Pull Request resolved: https://github.com/facebook/react-native/pull/42655

This bug is caused by a caching issue: when the user enters a new character into the textInput: ReactTextInput 1) caches the Spannable entered by the user and 2) it updates internal Fabric state, which triggers the measurement of the TextInput component using the cached Spannable.

The problem is that the Spannable entered by the user has the wrong "styles" for the text input. Since measurement is using the cached Spannable, then the measurement of the TextInput ends up being is incorrect.

In this diff I'm fixing the bug by updating the styles (lineHeight) of the cached spannable that is cached when the user updates the TextInput.
The styles weren't updated correctly because mTextAttributes didn't have the proper style props set

Changelog:
    [Android][Fixed] - Fix incorrect measurement of TextInput when new architecture is enabled

Reviewed By: javache, sammy-SC

Differential Revision: D52924982

fbshipit-source-id: ced9f2c348bdb9bf706028b1063858cebd5a071a
This commit is contained in:
David Vacca
2024-01-25 11:07:12 -08:00
committed by Facebook GitHub Bot
parent 97d6d724e1
commit dc2ce9e66e
3 changed files with 13 additions and 0 deletions
@@ -7381,6 +7381,7 @@ public class com/facebook/react/views/textinput/ReactEditText : androidx/appcomp
public fun setFontWeight (Ljava/lang/String;)V
public fun setInputType (I)V
public fun setLetterSpacingPt (F)V
public fun setLineHeight (I)V
public fun setMaxFontSizeMultiplier (F)V
public fun setOnKeyPress (Z)V
public fun setPlaceholder (Ljava/lang/String;)V
@@ -7468,6 +7469,7 @@ public class com/facebook/react/views/textinput/ReactTextInputManager : com/face
public fun setInlineImagePadding (Lcom/facebook/react/views/textinput/ReactEditText;I)V
public fun setKeyboardType (Lcom/facebook/react/views/textinput/ReactEditText;Ljava/lang/String;)V
public fun setLetterSpacing (Lcom/facebook/react/views/textinput/ReactEditText;F)V
public fun setLineHeight (Lcom/facebook/react/views/textinput/ReactEditText;I)V
public fun setMaxFontSizeMultiplier (Lcom/facebook/react/views/textinput/ReactEditText;F)V
public fun setMaxLength (Lcom/facebook/react/views/textinput/ReactEditText;Ljava/lang/Integer;)V
public fun setMultiline (Lcom/facebook/react/views/textinput/ReactEditText;Z)V
@@ -270,6 +270,12 @@ public class ReactEditText extends AppCompatEditText {
return super.onKeyUp(keyCode, event);
}
@Override
public void setLineHeight(int lineHeight) {
mTextAttributes.setLineHeight(lineHeight);
super.setLineHeight(lineHeight);
}
@Override
protected void onScrollChanged(int horiz, int vert, int oldHoriz, int oldVert) {
super.onScrollChanged(horiz, vert, oldHoriz, oldVert);
@@ -382,6 +382,11 @@ public class ReactTextInputManager extends BaseViewManager<ReactEditText, Layout
}
}
@ReactProp(name = ViewProps.LINE_HEIGHT, defaultFloat = ViewDefaults.LINE_HEIGHT)
public void setLineHeight(ReactEditText view, int lineHeight) {
view.setLineHeight(lineHeight);
}
@ReactProp(name = ViewProps.FONT_SIZE, defaultFloat = ViewDefaults.FONT_SIZE_SP)
public void setFontSize(ReactEditText view, float fontSize) {
view.setFontSize(fontSize);