Skip to content

fix: select text on auto focus for TextInput #45004

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
kunalchavhan wants to merge 4 commits into from
Closed

fix: select text on auto focus for TextInput #45004

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
a6d4d42
fix: select text on auto focus
kunalchavhan Jun 17, 2024
a0b5ca5
Merge branch 'main' into fix/textinput-selecttext-autofocus
kunalchavhan Jul 1, 2024
180363d
fix: add sample for autofocus and selelect text on focus in RN-Tester
kunalchavhan Jul 4, 2024
5fc1d11
fix: check focus before selecting text
kunalchavhan Jul 12, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
12 changes: 12 additions & 0 deletions ...t-native/ReactAndroid/src/main/java/com/facebook/react/views/textinput/ReactEditText.java
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -120,6 +120,7 @@ public class ReactEditText extends AppCompatEditText {
private boolean mAutoFocus = false;
private boolean mContextMenuHidden = false;
private boolean mDidAttachToWindow = false;
private boolean mSelectTextOnFocus = false;
private @Nullable String mPlaceholder = null;

private final ReactViewBackgroundManager mReactBackgroundManager;
Expand Down Expand Up @@ -238,6 +239,12 @@ public boolean isLayoutRequested() {
@Override
protected void onLayout(boolean changed, int left, int top, int right, int bottom) {
onContentSizeChange();
if (mSelectTextOnFocus && isFocused()) {
// Explicitly call this method to select text when layout is drawn
selectAll();
// Prevent text on being selected for next layout pass
mSelectTextOnFocus = false;
}
}

@Override
Expand Down Expand Up @@ -1125,6 +1132,11 @@ public void setAutoFocus(boolean autoFocus) {
mAutoFocus = autoFocus;
}

public void setSelectTextOnFocus(boolean selectTextOnFocus) {
super.setSelectAllOnFocus(selectTextOnFocus);
mSelectTextOnFocus = selectTextOnFocus;
}

public void setContextMenuHidden(boolean contextMenuHidden) {
mContextMenuHidden = contextMenuHidden;
}
Expand Down
2 changes: 1 addition & 1 deletion .../ReactAndroid/src/main/java/com/facebook/react/views/textinput/ReactTextInputManager.java
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -656,7 +656,7 @@ public void setContextMenuHidden(ReactEditText view, boolean contextMenuHidden)

@ReactProp(name = "selectTextOnFocus", defaultBoolean = false)
public void setSelectTextOnFocus(ReactEditText view, boolean selectTextOnFocus) {
view.setSelectAllOnFocus(selectTextOnFocus);
view.setSelectTextOnFocus(selectTextOnFocus);
}

@ReactProp(name = ViewProps.COLOR, customType = "Color")
Expand Down
29 changes: 22 additions & 7 deletions packages/rn-tester/js/examples/TextInput/TextInputSharedExamples.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -77,6 +77,26 @@ const styles = StyleSheet.create({
},
});

class AutoFocusWithSelectOnFocusTextExample extends React.Component<
$FlowFixMeProps,
any,
> {
constructor(props: any | void) {
super(props);
this.state = {text: 'Hello World'};
}
render(): React.Node {
return (
<ExampleTextInput
autoFocus={true}
selectTextOnFocus={true}
value={this.state.text}
onChangeText={text => this.setState({text: text})}
accessibilityLabel="I am the accessibility label for text input"
/>
);
}
}
class WithLabel extends React.Component<$FlowFixMeProps> {
render(): React.Node {
return (
Expand Down Expand Up @@ -815,14 +835,9 @@ function MultilineStyledTextInput({

module.exports = ([
{
title: 'Auto-focus',
title: 'Auto-focus & select text on focus',
Copy link
Copy Markdown
Contributor

@cortinico cortinico Jul 4, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Why haven't you just added selectTextOnFocus here but instead you also added onChangeText?

Copy link
Copy Markdown
Contributor Author

@kunalchavhan kunalchavhan Jul 5, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

To show selected text I have added value prop with initial value set to Hello World. Earlier the auto-focus sample allowed user input. After adding value prop user input was getting overridden, I have added onChangeText to change value to user's input.

Copy link
Copy Markdown
Contributor Author

@kunalchavhan kunalchavhan Jul 8, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@cortinico do you want me to remove onChangeText?

Copy link
Copy Markdown
Contributor

@cortinico cortinico Jul 8, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

nope, thanks for the clarification 👍

render: function (): React.Node {
return (
<ExampleTextInput
autoFocus={true}
accessibilityLabel="I am the accessibility label for text input"
/>
);
return <AutoFocusWithSelectOnFocusTextExample />;
},
},
{
Expand Down