iOS 14 TextInput jumping and auto-scrolling on tap #30207

nfjones87 · 2020-10-19T23:02:17Z

Please provide all the information requested. Issues that do not follow this format are likely to stall.

Description

Brand new build, nothing except the code below. Xcode version 12.0.1 iOS 14. RN 0.63.3. scrolling and tapping makes TextInput jump to random places. Happening on iPhone 11 Pro both simulator and device.

React Native version:

System:
OS: macOS 10.15.7
CPU: (16) x64 Intel(R) Core(TM) i9-9880H CPU @ 2.30GHz
Memory: 973.16 MB / 16.00 GB
Shell: 5.7.1 - /bin/zsh
Binaries:
Node: 12.16.3 - /usr/local/bin/node
Yarn: Not Found
npm: 6.14.4 - /usr/local/bin/npm
Watchman: 4.9.0 - /usr/local/bin/watchman
Managers:
CocoaPods: 1.9.1 - /usr/local/bin/pod
SDKs:
iOS SDK:
Platforms: iOS 14.0, DriverKit 19.0, macOS 10.15, tvOS 14.0, watchOS 7.0
Android SDK: Not Found
IDEs:
Android Studio: 3.6 AI-192.7142.36.36.6392135
Xcode: 12.0.1/12A7300 - /usr/bin/xcodebuild
Languages:
Java: Not Found
Python: 2.7.16 - /usr/bin/python
npmPackages:
@react-native-community/cli: Not Found
react: 16.13.1 => 16.13.1
react-native: 0.63.3 => 0.63.3
react-native-macos: Not Found
npmGlobalPackages:
react-native: Not Found

Steps To Reproduce

Simply have a basic TextInput with enough text to produce a vertical scrollbar, then scroll and tap.

Expected Results

The tap should place cursor at tapped position, and not autoscroll the TextInput to the wrong place.

Snack, code example, screenshot, or link to a repository:

export default class TextField extends Component {

   constructor(){
     super();
     this.state={textInput: ''}
   }

  handleChangeText = (textInput) => {
    this.setState({ textInput });
  }

    return (
        <View style={{flex: 1, backgroundColor: 'blue'}}>
           <TextInput 
            style={{marginTop: 100, height: 300, backgroundColor: 'white'}}
            value={this.state.textInput}
            multiline={true}
            onChangeText={this.handleChangeText}
          ></TextInput>     
        </View>
    )
}

The text was updated successfully, but these errors were encountered:

nfjones87 · 2020-10-20T17:06:59Z

Further information:

if I change the render to

render(){ return ( <ScrollView> <TextInput value={this.state.textInput} multiline={true} onChangeText={this.handleChangeText} /> </ScrollView> ); }

the issue is resolved on every phone i have tested EXCEPT the iPhone 11 Pro. (works with iPhone 11 and iPhone 11 Pro Max).

The issue on iPhone 11 Pro becomes that one cannot scroll the TextInput beyond the device's height unless I add a height to the TextInput. However, adding a height brings back the initial bug.

safaiyeh · 2020-10-20T18:06:59Z

Hi @nfjones87 appreciate the investigation. Definitely odd behavior, what would cause the iPhone 11 Pro to have different behavior?

nfjones87 · 2020-10-20T18:33:31Z

Hi @safaiyeh , thanks for commenting. I really don't know what could cause the iPhone 11 Pro to have different behavior. I am simply toggling between different simulators, and it works on all except iPhone 11 pro. For whatever reason the iPhone 11 Pro needs the TextInput to have a set height or else it cannot scroll. However, setting a height produces the bug.

To clarify, the bug in the gif above is reproducible on all phones, however it can be fixed on all phones except the iPhone 11 Pro.

nfjones87 · 2020-10-27T17:28:26Z

Bump, anyone else experiencing this?

RichardFevrier · 2020-10-30T06:29:35Z

Sure @nfjones87 😌

foloinfo · 2021-01-14T03:07:39Z

I'm facing the same issue.
It happens when I specify the height of the TextInput.

I ended up avoiding this behavior by removing the height of TextInput and setting the height to the parent ScrollView (like in the comment above) and setting scrollEnabled to false

<ScrollView style={{ height: 300 }}>
  <TextInput
    scrollEnabled={false}
    style={{
      minHeight: 300,
    }}
  />
</ScrollView>

It still randomly scrolls when I tap the text but at least the cursor is pointed at where it should be so works a little better than setting the height directly, or maybe not.

cenaHara · 2021-01-19T08:37:45Z

hi @nfeignon Have you solved this problem yet?

cenaHara · 2021-01-19T08:40:50Z

I'm facing the same issue.
It happens when I specify the height of the TextInput.

I ended up avoiding this behavior by removing the height of TextInput and setting the height to the parent ScrollView (like in the comment above) and setting scrollEnabled to false
<ScrollView style={{ height: 300 }}>
  <TextInput
    scrollEnabled={false}
    style={{
      minHeight: 300,
    }}
  />
</ScrollView>
It still randomly scrolls when I tap the text but at least the cursor is pointed at where it should be so works a little better than setting the height directly, or maybe not.

Yes, you can see the position cursor but the scroll view cannot automatically scroll

tnghia944 · 2021-01-19T10:53:39Z

It's an OS bug, I tried opening the app message from my phone, and it got the same

YohanesFrangky · 2021-02-17T19:51:36Z

hey, @nfjones87 have you fix this yet? i tried several open-source react native app, and try their textinput, and the bug is occured in all of them.

tarouboy · 2021-03-03T03:14:38Z

Tried to rollback to 0.61.5 and problem persists on iOS 14+.

Tried to wrap the TextInput ( scrollEnabled=false ) with ScrollView, now I can tap on anywhere to edit, which is good.
However, I found two problems if wrapped by ScrollView:

ScrollView won't scroll if you highlight the text and move upward/downward
Pressing "Enter" on the keyboard won't scroll to the newline unless you type something ( it's very confusing )

tkharuk · 2021-03-08T08:30:26Z

Experiencing the same issue.
Also, if I try to use "space" press to scroll select, Input goes wild and just blinks and flashes :(
This basically means users can not use scrollable editable content at all!

Any working workarounds to cover all platforms/versions?

@safaiyeh any plans from your side? I feel like this is a major one.

YohanesFrangky · 2021-03-09T02:39:25Z

Tried to rollback to 0.61.5 and problem persists on iOS 14+.

Tried to wrap the TextInput ( scrollEnabled=false ) with ScrollView, now I can tap on anywhere to edit, which is good.
However, I found two problems if wrapped by ScrollView:

ScrollView won't scroll if you highlight the text and move upward/downward

Pressing "Enter" on the keyboard won't scroll to the newline unless you type something ( it's very confusing )

yes I have tried that, but I got a problem with newline as well, so I can't use that approach

efstathiosntonas · 2021-03-11T08:35:16Z

Experiencing the same, here's an almost duplicate issue: #30748

efstathiosntonas · 2021-03-11T09:38:58Z

It seems that the animated:NO causes the issue, setting it to animated:YES fixes it partially.

react-native/Libraries/Text/TextInput/Multiline/RCTUITextView.m

Lines 185 to 190 in 896baf7

    
           - (void)setContentOffset:(CGPoint)contentOffset animated:(__unused BOOL)animated 
        
           { 
        
             // Turning off scroll animation. 
        
             // This fixes the problem also known as "flaky scrolling". 
        
             [super setContentOffset:contentOffset animated:NO]; 
        
           }

Tested against iPhone 11 simulator and real iPhone XS.

But pressing space and moving up-down it's a bit jerky.

Update: Removing completely the above lines seems to improve up-down carret movement, I do not know what side effects this might cause though.

tarouboy · 2021-03-12T04:24:21Z

Update: Removing completely the above lines seems to improve up-down carret movement. i do not know what side effects this might cause though.

Awesome! The jumpy behaviours seems to be fixed.

However, by removing the line completely it will stay at the current position and won't scroll to the caret position after entering something new at the end of the textInput.

Update:
For now it's my temp solution:

if (@available(iOS 14, *)) {
   // iOS 14 (or newer)
   [super setContentOffset:contentOffset animated:YES];
} else {
   // Turning off scroll animation.
   // This fixes the problem also known as "flaky scrolling".
   [super setContentOffset:contentOffset animated:NO];
}

iKoru · 2021-04-24T09:53:35Z

hello, @tarouboy and everyone.
I'm experiencing the same issue and want to fix it.
I tried @tarouboy 's solution and it seems the cursor is going to the right position but scroll effect is still the problem (goes to wrong place).
any idea to fix this?

tarouboy · 2021-04-29T16:07:55Z

hello, @tarouboy and everyone.
I'm experiencing the same issue and want to fix it.
I tried @tarouboy 's solution and it seems the cursor is going to the right position but scroll effect is still the problem (goes to wrong place).
any idea to fix this?

Mine is working fine. At least no more users are reporting the same issue.
Not sure about your case without further information.

github-actions · 2023-08-23T05:12:58Z

This issue is stale because it has been open 180 days with no activity. Remove stale label or comment or this will be closed in 7 days.

github-actions · 2023-08-30T05:13:08Z

This issue was closed because it has been stalled for 7 days with no activity.

fabOnReact · 2024-01-17T08:29:42Z

Do you still experience this issue?

I have four years of experience maintaining facebook/react-native and I specialize in the Text and TextInput components. I currently have 58 facebook/react-native PRs.

If you still experience this issue, I will prepare a patched release with the fix.

Thanks a lot

nfjones87 added the Needs: Triage 🔍 label Oct 19, 2020

react-native-bot added Component: TextInput Related to the TextInput component. Platform: iOS iOS applications. labels Oct 19, 2020

safaiyeh added iOS 14 and removed Needs: Triage 🔍 labels Oct 20, 2020

efstathiosntonas mentioned this issue Mar 17, 2021

TextInput multiline unresponsive when setting cursor with finger on specific position FaridSafi/react-native-gifted-chat#2012

Closed

samuelbeaulieu mentioned this issue Jun 15, 2021

iOS Keyboard Autofill/SecureTextEntry makes content jump/glitch when focusing on next TextInput #31722

Open

kelset removed the iOS 14 label Jan 23, 2023

eVoloshchak mentioned this issue Jun 19, 2023

[Ready for Payment][$1000] iOS - Chat - "Edit comment" input field scrolls up when tap enter in 1st line of text Expensify/App#19507

Closed

6 tasks

github-actions bot added the Stale There has been a lack of activity on this issue and it may be closed soon. label Aug 23, 2023

github-actions bot closed this as completed Aug 30, 2023

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

iOS 14 TextInput jumping and auto-scrolling on tap #30207

iOS 14 TextInput jumping and auto-scrolling on tap #30207

nfjones87 commented Oct 19, 2020 •

edited

Loading

nfjones87 commented Oct 20, 2020 •

edited

Loading

safaiyeh commented Oct 20, 2020

nfjones87 commented Oct 20, 2020

nfjones87 commented Oct 27, 2020

RichardFevrier commented Oct 30, 2020

foloinfo commented Jan 14, 2021

cenaHara commented Jan 19, 2021

cenaHara commented Jan 19, 2021

tnghia944 commented Jan 19, 2021

YohanesFrangky commented Feb 17, 2021

tarouboy commented Mar 3, 2021 •

edited

Loading

tkharuk commented Mar 8, 2021

YohanesFrangky commented Mar 9, 2021

efstathiosntonas commented Mar 11, 2021 •

edited

Loading

efstathiosntonas commented Mar 11, 2021 •

edited

Loading

tarouboy commented Mar 12, 2021 •

edited

Loading

iKoru commented Apr 24, 2021

tarouboy commented Apr 29, 2021

github-actions bot commented Aug 23, 2023

github-actions bot commented Aug 30, 2023

fabOnReact commented Jan 17, 2024

iOS 14 TextInput jumping and auto-scrolling on tap #30207

iOS 14 TextInput jumping and auto-scrolling on tap #30207

Comments

nfjones87 commented Oct 19, 2020 • edited Loading

Description

React Native version:

Steps To Reproduce

Expected Results

Snack, code example, screenshot, or link to a repository:

nfjones87 commented Oct 20, 2020 • edited Loading

safaiyeh commented Oct 20, 2020

nfjones87 commented Oct 20, 2020

nfjones87 commented Oct 27, 2020

RichardFevrier commented Oct 30, 2020

foloinfo commented Jan 14, 2021

cenaHara commented Jan 19, 2021

cenaHara commented Jan 19, 2021

tnghia944 commented Jan 19, 2021

YohanesFrangky commented Feb 17, 2021

tarouboy commented Mar 3, 2021 • edited Loading

tkharuk commented Mar 8, 2021

YohanesFrangky commented Mar 9, 2021

efstathiosntonas commented Mar 11, 2021 • edited Loading

efstathiosntonas commented Mar 11, 2021 • edited Loading

tarouboy commented Mar 12, 2021 • edited Loading

iKoru commented Apr 24, 2021

tarouboy commented Apr 29, 2021

github-actions bot commented Aug 23, 2023

github-actions bot commented Aug 30, 2023

fabOnReact commented Jan 17, 2024

nfjones87 commented Oct 19, 2020 •

edited

Loading

nfjones87 commented Oct 20, 2020 •

edited

Loading

tarouboy commented Mar 3, 2021 •

edited

Loading

efstathiosntonas commented Mar 11, 2021 •

edited

Loading

efstathiosntonas commented Mar 11, 2021 •

edited

Loading

tarouboy commented Mar 12, 2021 •

edited

Loading