react-native
react-native copied to clipboard
fix: scroll the cursor into view when focus
Summary:
Currently in iOS, when focusing the multiline text input, the cursor is not automatically scrolled into view if it is out of view. This PR adds the small util to scroll the cursor into view when the text input focuses. This doesn't happen in Android due to this
Original issue: https://github.com/Expensify/App/issues/48122 Original proposal: https://github.com/Expensify/App/issues/48122#issuecomment-2320769418
Changelog:
[IOS] [ADDED] - Scroll the cursor into view when text input is focused
Test Plan:
Code to reproduce in rn-tester
const TextInputWithFocusButton = () => {
const inputToFocusRef = React.useRef<React.ElementRef<typeof TextInput> | null>(null);
return (
<View>
<ExampleTextInput
ref={inputToFocusRef}
placeholder="height increases with content"
defaultValue="React Native enables you to build world-class application experiences on native platforms using a consistent developer experience based on JavaScript and React. The focus of React Native is on developer efficiency across all the platforms you care about - learn once, write anywhere. Facebook uses React Native in multiple production apps and will continue investing in React Native."
multiline={true}
enablesReturnKeyAutomatically={true}
returnKeyType="go"
style={[styles.multiline, styles.multilineExpandable]}
/>
<Button title="Focus" onPress={() => {
inputToFocusRef.current?.focus();
}} />
</View>
);
};
Steps:
- Move the cursor of the input to end of the input text
- Scroll up the input
- Blur the input
- Click on
Focus
button to re-focus the input
Note that before this fix, the cursor is not scrolled into view
- In iOS
Before | After |
---|---|
https://github.com/user-attachments/assets/de589cbf-158c-4e28-81d6-8412bf05ab23 |
https://github.com/user-attachments/assets/81c571f9-653b-49a5-9ecb-6eeaa2c54ec7 |