From 43cff325ee434da36c20ecf8a2487f9f9bee2f12 Mon Sep 17 00:00:00 2001 From: Nick Gerleman Date: Tue, 15 Oct 2024 08:59:07 -0700 Subject: [PATCH] Fix cursor moving while typing quickly and autocorrection triggered in controlled single line TextInput on iOS (New Arch) (#46970) Summary: Fixes https://github.com/facebook/react-native/issues/44157 This one is a bit of a doozy... During auto-correct in UITextField (used for single line TextInput) iOS will mutate the buffer in two parts, non-atomically. After the first part, after iOS triggers `textFieldDidChange`, selection is in the wrong position. If we set full new AttributedText at this point, we propagate the incorrect cursor position, and it is never restored. In the common case, where we are not mutating text in the controlled component, we shouldn't need to be setting AttributedString in the first place, and we do have an equality comparison there currently. But it is defeated because attributes are not identical. There are a few sources of that: 1. NSParagraphStyle is present in backing input, but not the AttributedString we are setting. 2. Backing text has an NSShadow with no color (does not render) not in the AttributedText 3. Event emitter attributes change on each update, and new text does not inherit the attributes. The first two are part of the backing input `typingAttributes`, even if we set a dictionary without them. To solve for them, we make attribute comparison insensitive to the attribute values in a default initialized control. There is code around here fully falling back to attribute insensitive comparison, which we would ideally fix to instead role into this "effective" attribute comparison. The event emitter attributes being misaligned is a real problem. We fix in a couple ways. 1. We treat the attribute values as equal if the backing event emitter is the same 2. We set paragraph level event emitter as a default attribute so the first typed character receives it After these fixes, scenario in https://github.com/facebook/react-native-website/pull/4247 no longer repros in new arch. Typing in debug build also subjectively seems faster? (we are not doing second invalidation of the control on every keypress). Changes which do mutate content may be susceptible to the same style of issue, though on web/`react-dom` in Chrome, this seems to not try to preserve selection at all if the selection is uncontrolled, so this seems like less of an issue. I haven't yet looked at old arch, but my guess is we have similar issues there, and could be fixed in similar ways (though, we've been trying to avoid changing it as much as possible, and 0.76+ has new arch as default, so not sure if worth fixing in old impl as well if this is very long running issue). Changelog: [iOS][Fixed] - Fix cursor moving in iOS controlled single line TextInput on Autocorrection (New Arch) Reviewed By: philIip Differential Revision: D64121570 --- .../RCTBackedTextInputViewProtocol.h | 1 + .../TextInput/RCTTextInputComponentView.mm | 33 +++- .../RCTAttributedTextUtils.h | 13 +- .../RCTAttributedTextUtils.mm | 167 +++++++++++++++++- 4 files changed, 208 insertions(+), 6 deletions(-) diff --git a/packages/react-native/Libraries/Text/TextInput/RCTBackedTextInputViewProtocol.h b/packages/react-native/Libraries/Text/TextInput/RCTBackedTextInputViewProtocol.h index 7aa5bcd54e7b36..cc510133cc614f 100644 --- a/packages/react-native/Libraries/Text/TextInput/RCTBackedTextInputViewProtocol.h +++ b/packages/react-native/Libraries/Text/TextInput/RCTBackedTextInputViewProtocol.h @@ -35,6 +35,7 @@ NS_ASSUME_NONNULL_BEGIN @property (nonatomic, assign, readonly) CGFloat zoomScale; @property (nonatomic, assign, readonly) CGPoint contentOffset; @property (nonatomic, assign, readonly) UIEdgeInsets contentInset; +@property (nullable, nonatomic, copy) NSDictionary *typingAttributes; // This protocol disallows direct access to `selectedTextRange` property because // unwise usage of it can break the `delegate` behavior. So, we always have to diff --git a/packages/react-native/React/Fabric/Mounting/ComponentViews/TextInput/RCTTextInputComponentView.mm b/packages/react-native/React/Fabric/Mounting/ComponentViews/TextInput/RCTTextInputComponentView.mm index 8c532d85502bc1..cec786fa787824 100644 --- a/packages/react-native/React/Fabric/Mounting/ComponentViews/TextInput/RCTTextInputComponentView.mm +++ b/packages/react-native/React/Fabric/Mounting/ComponentViews/TextInput/RCTTextInputComponentView.mm @@ -61,6 +61,13 @@ @implementation RCTTextInputComponentView { */ BOOL _comingFromJS; BOOL _didMoveToWindow; + + /* + * Newly initialized default typing attributes contain a no-op NSParagraphStyle and NSShadow. These cause inequality + * between the AttributedString backing the input and those generated from state. We store these attributes to make + * later comparison insensitive to them. + */ + NSDictionary *_originalTypingAttributes; } #pragma mark - UIView overrides @@ -79,11 +86,27 @@ - (instancetype)initWithFrame:(CGRect)frame [self addSubview:_backedTextInputView]; [self initializeReturnKeyType]; + + _originalTypingAttributes = [_backedTextInputView.typingAttributes copy]; } return self; } +- (void)updateEventEmitter:(const EventEmitter::Shared &)eventEmitter +{ + [super updateEventEmitter:eventEmitter]; + + NSMutableDictionary *defaultAttributes = + [_backedTextInputView.defaultTextAttributes mutableCopy]; + + RCTWeakEventEmitterWrapper *eventEmitterWrapper = [RCTWeakEventEmitterWrapper new]; + eventEmitterWrapper.eventEmitter = _eventEmitter; + defaultAttributes[RCTAttributedStringEventEmitterKey] = eventEmitterWrapper; + + _backedTextInputView.defaultTextAttributes = defaultAttributes; +} + - (void)didMoveToWindow { [super didMoveToWindow]; @@ -236,8 +259,11 @@ - (void)updateProps:(const Props::Shared &)props oldProps:(const Props::Shared & } if (newTextInputProps.textAttributes != oldTextInputProps.textAttributes) { - _backedTextInputView.defaultTextAttributes = + NSMutableDictionary *defaultAttributes = RCTNSTextAttributesFromTextAttributes(newTextInputProps.getEffectiveTextAttributes(RCTFontSizeMultiplier())); + defaultAttributes[RCTAttributedStringEventEmitterKey] = + _backedTextInputView.defaultTextAttributes[RCTAttributedStringEventEmitterKey]; + _backedTextInputView.defaultTextAttributes = defaultAttributes; } if (newTextInputProps.selectionColor != oldTextInputProps.selectionColor) { @@ -732,9 +758,10 @@ - (BOOL)_textOf:(NSAttributedString *)newText equals:(NSAttributedString *)oldTe _backedTextInputView.markedTextRange || _backedTextInputView.isSecureTextEntry || fontHasBeenUpdatedBySystem; if (shouldFallbackToBareTextComparison) { - return ([newText.string isEqualToString:oldText.string]); + return [newText.string isEqualToString:oldText.string]; } else { - return ([newText isEqualToAttributedString:oldText]); + return RCTIsAttributedStringEffectivelySame( + newText, oldText, _originalTypingAttributes, static_cast(*_props).textAttributes); } } diff --git a/packages/react-native/ReactCommon/react/renderer/textlayoutmanager/platform/ios/react/renderer/textlayoutmanager/RCTAttributedTextUtils.h b/packages/react-native/ReactCommon/react/renderer/textlayoutmanager/platform/ios/react/renderer/textlayoutmanager/RCTAttributedTextUtils.h index c0158f3df61e7a..3427663d53d8f6 100644 --- a/packages/react-native/ReactCommon/react/renderer/textlayoutmanager/platform/ios/react/renderer/textlayoutmanager/RCTAttributedTextUtils.h +++ b/packages/react-native/ReactCommon/react/renderer/textlayoutmanager/platform/ios/react/renderer/textlayoutmanager/RCTAttributedTextUtils.h @@ -22,7 +22,7 @@ NSString *const RCTTextAttributesAccessibilityRoleAttributeName = @"Accessibilit /* * Creates `NSTextAttributes` from given `facebook::react::TextAttributes` */ -NSDictionary *RCTNSTextAttributesFromTextAttributes( +NSMutableDictionary *RCTNSTextAttributesFromTextAttributes( const facebook::react::TextAttributes &textAttributes); /* @@ -41,6 +41,17 @@ NSString *RCTNSStringFromStringApplyingTextTransform(NSString *string, facebook: void RCTApplyBaselineOffset(NSMutableAttributedString *attributedText); +/* + * Whether two `NSAttributedString` lead to the same underlying displayed text, even if they are not strictly equal. + * I.e. is one string substitutable for the other when backing a control (which may have some ignorable attributes + * provided). + */ +BOOL RCTIsAttributedStringEffectivelySame( + NSAttributedString *text1, + NSAttributedString *text2, + NSDictionary *insensitiveAttributes, + const facebook::react::TextAttributes &baseTextAttributes); + @interface RCTWeakEventEmitterWrapper : NSObject @property (nonatomic, assign) facebook::react::SharedEventEmitter eventEmitter; @end diff --git a/packages/react-native/ReactCommon/react/renderer/textlayoutmanager/platform/ios/react/renderer/textlayoutmanager/RCTAttributedTextUtils.mm b/packages/react-native/ReactCommon/react/renderer/textlayoutmanager/platform/ios/react/renderer/textlayoutmanager/RCTAttributedTextUtils.mm index 2b2cf02fa11604..36e379ce993801 100644 --- a/packages/react-native/ReactCommon/react/renderer/textlayoutmanager/platform/ios/react/renderer/textlayoutmanager/RCTAttributedTextUtils.mm +++ b/packages/react-native/ReactCommon/react/renderer/textlayoutmanager/platform/ios/react/renderer/textlayoutmanager/RCTAttributedTextUtils.mm @@ -35,6 +35,24 @@ - (void)dealloc _weakEventEmitter.reset(); } +- (BOOL)isEqual:(id)object +{ + // We consider the underlying EventEmitter as the identity + if (![object isKindOfClass:[self class]]) { + return NO; + } + + auto thisEventEmitter = [self eventEmitter]; + auto otherEventEmitter = [((RCTWeakEventEmitterWrapper *)object) eventEmitter]; + return thisEventEmitter == otherEventEmitter; +} + +- (NSUInteger)hash +{ + // We consider the underlying EventEmitter as the identity + return (NSUInteger)_weakEventEmitter.lock().get(); +} + @end inline static UIFontWeight RCTUIFontWeightFromInteger(NSInteger fontWeight) @@ -178,7 +196,8 @@ inline static CGFloat RCTEffectiveFontSizeMultiplierFromTextAttributes(const Tex return effectiveBackgroundColor ?: [UIColor clearColor]; } -NSDictionary *RCTNSTextAttributesFromTextAttributes(const TextAttributes &textAttributes) +NSMutableDictionary *RCTNSTextAttributesFromTextAttributes( + const TextAttributes &textAttributes) { NSMutableDictionary *attributes = [NSMutableDictionary dictionaryWithCapacity:10]; @@ -302,7 +321,7 @@ inline static CGFloat RCTEffectiveFontSizeMultiplierFromTextAttributes(const Tex attributes[RCTTextAttributesAccessibilityRoleAttributeName] = [NSString stringWithUTF8String:roleStr.c_str()]; } - return [attributes copy]; + return attributes; } void RCTApplyBaselineOffset(NSMutableAttributedString *attributedText) @@ -466,3 +485,147 @@ AttributedStringBox RCTAttributedStringBoxFromNSAttributedString(NSAttributedStr return string; } } + +static BOOL RCTIsParagraphStyleEffectivelySame( + NSParagraphStyle *style1, + NSParagraphStyle *style2, + const TextAttributes &baseTextAttributes) +{ + if (style1 == nil || style2 == nil) { + return style1 == nil && style2 == nil; + } + + // The NSParagraphStyle included as part of typingAttributes may eventually resolve "natural" directions to + // physical direction, so we should compare resolved directions + auto naturalAlignment = + baseTextAttributes.layoutDirection.value_or(LayoutDirection::LeftToRight) == LayoutDirection::LeftToRight + ? NSTextAlignmentLeft + : NSTextAlignmentRight; + + NSWritingDirection naturalBaseWritingDirection = baseTextAttributes.baseWritingDirection.has_value() + ? RCTNSWritingDirectionFromWritingDirection(baseTextAttributes.baseWritingDirection.value()) + : [NSParagraphStyle defaultWritingDirectionForLanguage:nil]; + + if (style1.alignment == NSTextAlignmentNatural || style1.baseWritingDirection == NSWritingDirectionNatural) { + NSMutableParagraphStyle *mutableStyle1 = [style1 mutableCopy]; + style1 = mutableStyle1; + + if (mutableStyle1.alignment == NSTextAlignmentNatural) { + mutableStyle1.alignment = naturalAlignment; + } + + if (mutableStyle1.baseWritingDirection == NSWritingDirectionNatural) { + mutableStyle1.baseWritingDirection = naturalBaseWritingDirection; + } + } + + if (style2.alignment == NSTextAlignmentNatural || style2.baseWritingDirection == NSWritingDirectionNatural) { + NSMutableParagraphStyle *mutableStyle2 = [style2 mutableCopy]; + style2 = mutableStyle2; + + if (mutableStyle2.alignment == NSTextAlignmentNatural) { + mutableStyle2.alignment = naturalAlignment; + } + + if (mutableStyle2.baseWritingDirection == NSWritingDirectionNatural) { + mutableStyle2.baseWritingDirection = naturalBaseWritingDirection; + } + } + + return [style1 isEqual:style2]; +} + +static BOOL RCTIsAttributeEffectivelySame( + NSAttributedStringKey attributeKey, + NSDictionary *attributes1, + NSDictionary *attributes2, + NSDictionary *insensitiveAttributes, + const TextAttributes &baseTextAttributes) +{ + id attribute1 = attributes1[attributeKey] ?: insensitiveAttributes[attributeKey]; + id attribute2 = attributes2[attributeKey] ?: insensitiveAttributes[attributeKey]; + + // Normalize attributes which can inexact but still effectively the same + if (attributeKey == NSParagraphStyleAttributeName) { + return RCTIsParagraphStyleEffectivelySame(attribute1, attribute2, baseTextAttributes); + } + + // Otherwise rely on built-in comparison + return [attribute1 isEqual:attribute2]; +} + +BOOL RCTIsAttributedStringEffectivelySame( + NSAttributedString *text1, + NSAttributedString *text2, + NSDictionary *insensitiveAttributes, + const TextAttributes &baseTextAttributes) +{ + if (![text1.string isEqualToString:text2.string]) { + return NO; + } + + // We check that for every fragment in the old string + // 1. The new string's fragment overlapping the first spans the same characters + // 2. The attributes of each matching fragment are the same, ignoring those which match insensitive attibutes + __block BOOL areAttributesSame = YES; + [text1 enumerateAttributesInRange:NSMakeRange(0, text1.length) + options:0 + usingBlock:^( + NSDictionary *text1Attributes, + NSRange text1Range, + BOOL *text1Stop) { + [text2 enumerateAttributesInRange:text1Range + options:0 + usingBlock:^( + NSDictionary *text2Attributes, + NSRange text2Range, + BOOL *text2Stop) { + if (!NSEqualRanges(text1Range, text2Range)) { + areAttributesSame = NO; + *text1Stop = YES; + *text2Stop = YES; + return; + } + + // Compare every attribute in text1 to the corresponding attribute + // in text2, or the set of insensitive attributes if not present + for (NSAttributedStringKey key in text1Attributes) { + if (!RCTIsAttributeEffectivelySame( + key, + text1Attributes, + text2Attributes, + insensitiveAttributes, + baseTextAttributes)) { + areAttributesSame = NO; + *text1Stop = YES; + *text2Stop = YES; + return; + } + } + + for (NSAttributedStringKey key in text2Attributes) { + // We have already compared this attribute if it is present in + // both + if (text1Attributes[key] != nil) { + continue; + } + + // But we still need to compare attributes if it is only present + // in text 2, to compare against insensitive attributes + if (!RCTIsAttributeEffectivelySame( + key, + text1Attributes, + text2Attributes, + insensitiveAttributes, + baseTextAttributes)) { + areAttributesSame = NO; + *text1Stop = YES; + *text2Stop = YES; + return; + } + } + }]; + }]; + + return areAttributesSame; +}