mirror of
https://github.com/facebook/react-native.git
synced 2024-11-21 22:10:14 +00:00
fix: scroll the cursor into view when focus (#46411)
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](defb0bd137/packages/react-native/ReactAndroid/src/main/java/com/facebook/react/views/textinput/ReactEditText.java (L360)
)
Original issue: https://github.com/Expensify/App/issues/48122
Original proposal: https://github.com/Expensify/App/issues/48122#issuecomment-2320769418
## Changelog:
<!-- Help reviewers and the release process by writing your own changelog entry.
Pick one each for the category and type tags:
[ANDROID|GENERAL|IOS|INTERNAL] [BREAKING|ADDED|CHANGED|DEPRECATED|REMOVED|FIXED|SECURITY] - Message
For more details, see:
https://reactnative.dev/contributing/changelogs-in-pull-requests
-->
[IOS] [ADDED] - Scroll the cursor into view when text input is focused
Pull Request resolved: https://github.com/facebook/react-native/pull/46411
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
<table>
<tr>
<th>Before</th>
<th>After</th>
</tr>
<tr>
<td>
https://github.com/user-attachments/assets/de589cbf-158c-4e28-81d6-8412bf05ab23
</td>
<td>
https://github.com/user-attachments/assets/81c571f9-653b-49a5-9ecb-6eeaa2c54ec7
</td>
</tr>
</table>
Reviewed By: sammy-SC
Differential Revision: D62847985
Pulled By: cipolleschi
fbshipit-source-id: c0367a7fc0a7a16b30c4538e59f42d971d959357
This commit is contained in:
parent
794154e63a
commit
e021e50d53
@ -114,6 +114,7 @@ static NSSet<NSNumber *> *returnKeyTypesSet;
|
||||
const auto &props = static_cast<const TextInputProps &>(*_props);
|
||||
if (props.autoFocus) {
|
||||
[_backedTextInputView becomeFirstResponder];
|
||||
[self scrollCursorIntoView];
|
||||
}
|
||||
_didMoveToWindow = YES;
|
||||
[self initializeReturnKeyType];
|
||||
@ -495,6 +496,8 @@ static NSSet<NSNumber *> *returnKeyTypesSet;
|
||||
[_backedTextInputView selectAll:nil];
|
||||
[self textInputDidChangeSelection];
|
||||
}
|
||||
|
||||
[self scrollCursorIntoView];
|
||||
}
|
||||
|
||||
- (void)blur
|
||||
@ -729,6 +732,16 @@ static NSSet<NSNumber *> *returnKeyTypesSet;
|
||||
}
|
||||
}
|
||||
|
||||
- (void)scrollCursorIntoView
|
||||
{
|
||||
UITextRange *selectedRange = _backedTextInputView.selectedTextRange;
|
||||
if (selectedRange.empty) {
|
||||
NSInteger offsetStart = [_backedTextInputView offsetFromPosition:_backedTextInputView.beginningOfDocument
|
||||
toPosition:selectedRange.start];
|
||||
[_backedTextInputView scrollRangeToVisible:NSMakeRange(offsetStart, 0)];
|
||||
}
|
||||
}
|
||||
|
||||
- (void)_setMultiline:(BOOL)multiline
|
||||
{
|
||||
[_backedTextInputView removeFromSuperview];
|
||||
|
@ -28,6 +28,7 @@ const {
|
||||
Switch,
|
||||
Text,
|
||||
View,
|
||||
TextInput,
|
||||
} = require('react-native');
|
||||
|
||||
class WithLabel extends React.Component<$FlowFixMeProps> {
|
||||
@ -263,6 +264,31 @@ class AutogrowingTextInputExample extends React.Component<
|
||||
}
|
||||
}
|
||||
|
||||
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>
|
||||
);
|
||||
};
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
multiline: {
|
||||
height: 50,
|
||||
@ -895,6 +921,12 @@ const textInputExamples: Array<RNTesterModuleExample> = [
|
||||
);
|
||||
},
|
||||
},
|
||||
{
|
||||
title: 'Auto scroll cursor into view when focusing',
|
||||
render: function (): React.Node {
|
||||
return <TextInputWithFocusButton />;
|
||||
},
|
||||
},
|
||||
{
|
||||
title: 'Line Break Mode',
|
||||
render: function (): React.Node {
|
||||
|
Loading…
Reference in New Issue
Block a user