Skip to content

Fix TextInput placeholder keeping a removed letterSpacing on iOS #59809

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
hydromoll wants to merge 1 commit into
base: main
Choose a base branch
from
Open

Fix TextInput placeholder keeping a removed letterSpacing on iOS #59809

Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
32 changes: 24 additions & 8 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 @@ -210,6 +210,20 @@ - (void)updateProps:(const Props::Shared &)props oldProps:(const Props::Shared &
// Traits:
if (newTextInputProps.multiline != oldTextInputProps.multiline) {
[self _setMultiline:newTextInputProps.multiline];
} else if (
!newTextInputProps.multiline && !std::isnan(oldTextInputProps.textAttributes.letterSpacing) &&
std::isnan(newTextInputProps.textAttributes.letterSpacing) && _backedTextInputView.attributedText.length == 0) {
// Once a `UITextField` has shown a new placeholder string with `NSKernAttributeName`, it keeps that kerning for
// later placeholders that have no kern attribute. Removing `letterSpacing` leaves out the attribute (there is no
// value meaning "the font's own kerning"), so only a fresh backed text input renders the placeholder without
// spacing. A recycled view gets here with the previous component's `letterSpacing` still in `_props`.
// `RCTUITextView` (multiline) draws its own placeholder label and is not affected. An input holding text is
// left alone: its placeholder is hidden.
const BOOL wasFirstResponder = _backedTextInputView.isFirstResponder;
[self _setMultiline:newTextInputProps.multiline];
if (wasFirstResponder) {
[_backedTextInputView becomeFirstResponder];
}
}

if (newTextInputProps.traits.autocapitalizationType != oldTextInputProps.traits.autocapitalizationType) {
Expand Down Expand Up @@ -307,14 +321,8 @@ - (void)updateProps:(const Props::Shared &)props oldProps:(const Props::Shared &
// because they are being checked on-demand.

// Other props:
if (newTextInputProps.placeholder != oldTextInputProps.placeholder) {
_backedTextInputView.placeholder = RCTNSStringFromString(newTextInputProps.placeholder);
}

if (newTextInputProps.placeholderTextColor != oldTextInputProps.placeholderTextColor) {
_backedTextInputView.placeholderColor = RCTUIColorFromSharedColor(newTextInputProps.placeholderTextColor);
}

// Text attributes go before the placeholder: a new placeholder string must not reach UIKit with the previous
// attributes, which it would keep (see the `letterSpacing` note above).
if (newTextInputProps.textAttributes != oldTextInputProps.textAttributes) {
NSMutableDictionary<NSAttributedStringKey, id> *defaultAttributes =
RCTNSTextAttributesFromTextAttributes(newTextInputProps.getEffectiveTextAttributes(RCTFontSizeMultiplier()));
Expand All @@ -323,6 +331,14 @@ - (void)updateProps:(const Props::Shared &)props oldProps:(const Props::Shared &
_backedTextInputView.defaultTextAttributes = defaultAttributes;
}

if (newTextInputProps.placeholder != oldTextInputProps.placeholder) {
_backedTextInputView.placeholder = RCTNSStringFromString(newTextInputProps.placeholder);
}

if (newTextInputProps.placeholderTextColor != oldTextInputProps.placeholderTextColor) {
_backedTextInputView.placeholderColor = RCTUIColorFromSharedColor(newTextInputProps.placeholderTextColor);
}

if (newTextInputProps.selectionColor != oldTextInputProps.selectionColor) {
_backedTextInputView.tintColor = RCTUIColorFromSharedColor(newTextInputProps.selectionColor);
}
Expand Down
Loading