Skip to content

Commit 7f18ad0

Browse files
kosmydelmeta-codesync[bot]
authored andcommitted
Ellipsize single-line TextInput placeholders (#57909)
Summary: On Android, long `TextInput` placeholders are hard-clipped with no trailing ellipsis, while iOS truncates with `…`. Fixes #29663 (same class of bug as #55272; uses a correct multiline bitmask check and clears ellipsize when multiline is enabled). **Repro:** https://github.com/kosmydel/android-ellipsize-repro | Before | After | |--------|--------| | <img width="400" alt="image" src="https://github.com/user-attachments/assets/583a8323-03ae-4075-a662-a4c92e8fec9e" /> |<img width="400" alt="image" src="https://github.com/user-attachments/assets/ece0f350-2349-4244-b7c8-56acd7d15e91" /> | ## Changelog [Android] [Fixed] - Ellipsize long single-line TextInput placeholders to match iOS Pull Request resolved: #57909 Test Plan: - Unit: `ReactTextInputPropertyTest` — placeholder sets `TruncateAt.END`; toggling `multiline` clears/restores ellipsize - Manual: https://github.com/kosmydel/android-ellipsize-repro - Single-line constrained `TextInput` with a long placeholder → trailing `…` - Short placeholder unchanged - `multiline={true}` with a long placeholder → still wraps - Toggle `multiline` false → true → false → ellipsize restored Reviewed By: christophpurrer Differential Revision: D115724716 Pulled By: Abbondanzo fbshipit-source-id: a267626a4b8d78d5e853729c46400b88a107d53a
1 parent 7cdac2a commit 7f18ad0

2 files changed

Lines changed: 29 additions & 0 deletions

File tree

packages/react-native/ReactAndroid/src/main/java/com/facebook/react/views/textinput/ReactEditText.kt

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -614,6 +614,8 @@ public open class ReactEditText public constructor(context: Context) : AppCompat
614614
}
615615
wasMultiline = isMultiline
616616

617+
updatePlaceholderEllipsize()
618+
617619
// We override the KeyListener so that all keys on the soft input keyboard as well as hardware
618620
// keyboards work. Some KeyListeners like DigitsKeyListener will display the keyboard but not
619621
// accept all input from it
@@ -629,6 +631,16 @@ public open class ReactEditText public constructor(context: Context) : AppCompat
629631
this.placeholder = placeholder
630632
hint = placeholder
631633
}
634+
updatePlaceholderEllipsize()
635+
}
636+
637+
private fun updatePlaceholderEllipsize() {
638+
ellipsize =
639+
if (!isMultiline) {
640+
TextUtils.TruncateAt.END
641+
} else {
642+
null
643+
}
632644
}
633645

634646
public fun setFontFamily(fontFamily: String?) {

packages/react-native/ReactAndroid/src/test/java/com/facebook/react/views/textinput/ReactTextInputPropertyTest.kt

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,7 @@ import android.text.InputType
1919
import android.text.Layout
2020
import android.text.SpannableString
2121
import android.text.Spanned
22+
import android.text.TextUtils
2223
import android.util.DisplayMetrics
2324
import android.view.Gravity
2425
import android.view.View
@@ -198,9 +199,25 @@ class ReactTextInputPropertyTest {
198199

199200
manager.updateProperties(view, buildStyles("placeholder", "sometext"))
200201
assertThat(view.hint).isEqualTo("sometext")
202+
assertThat(view.ellipsize).isEqualTo(TextUtils.TruncateAt.END)
201203

202204
manager.updateProperties(view, buildStyles("placeholder", null))
203205
assertThat(view.hint).isNull()
206+
assertThat(view.ellipsize).isEqualTo(TextUtils.TruncateAt.END)
207+
}
208+
209+
@Test
210+
fun testPlaceholderEllipsizeRespectsMultiline() {
211+
manager.updateProperties(view, buildStyles("placeholder", "a very long placeholder string"))
212+
assertThat(view.ellipsize).isEqualTo(TextUtils.TruncateAt.END)
213+
214+
manager.updateProperties(view, buildStyles("multiline", true))
215+
view.commitStagedInputType()
216+
assertThat(view.ellipsize).isNull()
217+
218+
manager.updateProperties(view, buildStyles("multiline", false))
219+
view.commitStagedInputType()
220+
assertThat(view.ellipsize).isEqualTo(TextUtils.TruncateAt.END)
204221
}
205222

206223
@Test

0 commit comments

Comments
 (0)