In IOS TextInput does not update style if copy and pasted string is bigger then maxLength

[aureosouza]

In IOS TextInput does not update style if copy and pasted string is bigger then maxLength

[cipolleschi]

@aureosouza thanks for testing this out.
Currently we don't have capacity to investigate bugs that happens only in the Old Architecture, as our priority is to rollout and stabilize the new one.
If you manage to find the root cause and open a PR, I can help tho make sure it lands.

[react-native-bot]

⚠️

Newer Version of React Native is Available!

ℹ️

You are on a supported minor version, but it looks like there's a newer patch available - 0.75.3. Please upgrade to the highest patch for your minor or latest and verify if the issue persists (alternatively, create a new project and repro the issue in it). If it does not repro, please let us know so we can close out this issue. This helps us ensure we are looking at issues that still exist in the most recent releases.

[react-native-bot]

⚠️

Newer Version of React Native is Available!

ℹ️

You are on a supported minor version, but it looks like there's a newer patch available - undefined. Please upgrade to the highest patch for your minor or latest and verify if the issue persists (alternatively, create a new project and repro the issue in it). If it does not repro, please let us know so we can close out this issue. This helps us ensure we are looking at issues that still exist in the most recent releases.

[cipolleschi]

@aureosouza thanks for the report! Can you check if the issues exists also in the New Architecture, please?

[canpoyrazoglu]

I also created a new project from scratch on 0.75.3, tried both old and new architecture, and have a couple of observations to add:

In new architecture on 0.75.3, pasting text behaves completely differently and text seems to be pasted black, completely ignoring style. Please note that I'm not pasting rich text. I've tried pasting it to a plain text editor without rich text support, then copied again just to be 100% sure that I'm not pasting rich text, and it is still pasted black.

When NOT on new architecture on 0.75.3, I had a stranger behavior: the text didn't obey the style regardless of any paste event even when there was no maxLength support. This is what happens in completely typed text with no pasting involved.

Here is my code:

const [text, setText] = useState('');
const style = text.length >= 200 ? {color: 'red'} : {color: 'green'};
console.log('style', style.color);
...
 <ScrollView
        contentInsetAdjustmentBehavior="automatic">
        <TextInput multiline placeholder="Paste some long text" onChangeText={setText} style={style} />
 </ScrollView>

This is the output on a freshly started (just to make sure everything gets reset) app with type only:

The first 200 characters are green, and the rest are red.

After a deep dive into React Native's text handling at iOS side I've stumbled upon that the text is indeed composed of different attributed strings with different colors.

If I change RCTUITextView's - (void)textDidChange method to some ugly hack like this:

- (void)textDidChange
{
  _textWasPasted = NO;
    NSAttributedString *newString = [[NSAttributedString alloc] initWithString:self.attributedText.string attributes:self.defaultTextAttributes];
    if(![self.attributedText isEqualToAttributedString:newString]){
        self.attributedText = newString;
        [self _invalidatePlaceholderVisibility];
    }
}

Then the attributes are set correctly, whole text changes to correct color based on style and max length correctly (though placeholder disappears after the whole text is deleted, but this is a proof of concept anyway), and there are no longer fragments of text in different parts. Of course, this is definitely not a solution as we lose rich text support AND a new attributed string is constructed-and-assigned in every single text change.

At this point I don't know what the solution would be, because I can't manipulate entered text before it is entered as it seems to be handled natively and just dispatched a UITextViewTextDidChangeNotification event which calls textDidChange.

[aureosouza]

@cipolleschi I enabled the new arch with bundle install && RCT_NEW_ARCH_ENABLED=1 bundle exec pod install and it seems to be working now for me. But migrating to new arch in prod is not an option currently, we might try to help finding a fix for the old arch

[elencho]

@aureosouza is it only iOS related? can you reproduce it on android?