From a6d4d42f42365ddee1e06a09e6149d345abecc74 Mon Sep 17 00:00:00 2001 From: "kunal.chavhan" Date: Mon, 17 Jun 2024 14:16:27 +0530 Subject: [PATCH 1/3] fix: select text on auto focus --- .../react/views/textinput/ReactEditText.java | 12 ++++++++++++ .../react/views/textinput/ReactTextInputManager.java | 2 +- 2 files changed, 13 insertions(+), 1 deletion(-) diff --git a/packages/react-native/ReactAndroid/src/main/java/com/facebook/react/views/textinput/ReactEditText.java b/packages/react-native/ReactAndroid/src/main/java/com/facebook/react/views/textinput/ReactEditText.java index 014e0b489dd3..42c342d47f3f 100644 --- a/packages/react-native/ReactAndroid/src/main/java/com/facebook/react/views/textinput/ReactEditText.java +++ b/packages/react-native/ReactAndroid/src/main/java/com/facebook/react/views/textinput/ReactEditText.java @@ -119,6 +119,7 @@ public class ReactEditText extends AppCompatEditText { private int mFontStyle = ReactConstants.UNSET; private boolean mAutoFocus = false; private boolean mDidAttachToWindow = false; + private boolean mSelectTextOnFocus = false; private @Nullable String mPlaceholder = null; private final ReactViewBackgroundManager mReactBackgroundManager; @@ -234,6 +235,12 @@ public boolean isLayoutRequested() { @Override protected void onLayout(boolean changed, int left, int top, int right, int bottom) { onContentSizeChange(); + if (mSelectTextOnFocus) { + // Explicitly call this method to select text when layout is drawn + selectAll(); + // Prevent text on being selected for next layout pass + mSelectTextOnFocus = false; + } } @Override @@ -1121,6 +1128,11 @@ public void setAutoFocus(boolean autoFocus) { mAutoFocus = autoFocus; } + public void setSelectTextOnFocus(boolean selectTextOnFocus) { + super.setSelectAllOnFocus(selectTextOnFocus); + mSelectTextOnFocus = selectTextOnFocus; + } + protected void applyTextAttributes() { // In general, the `getEffective*` functions return `Float.NaN` if the // property hasn't been set. diff --git a/packages/react-native/ReactAndroid/src/main/java/com/facebook/react/views/textinput/ReactTextInputManager.java b/packages/react-native/ReactAndroid/src/main/java/com/facebook/react/views/textinput/ReactTextInputManager.java index 2c225da15548..a550dbf3a7af 100644 --- a/packages/react-native/ReactAndroid/src/main/java/com/facebook/react/views/textinput/ReactTextInputManager.java +++ b/packages/react-native/ReactAndroid/src/main/java/com/facebook/react/views/textinput/ReactTextInputManager.java @@ -663,7 +663,7 @@ public boolean onLongClick(View v) { @ReactProp(name = "selectTextOnFocus", defaultBoolean = false) public void setSelectTextOnFocus(ReactEditText view, boolean selectTextOnFocus) { - view.setSelectAllOnFocus(selectTextOnFocus); + view.setSelectTextOnFocus(selectTextOnFocus); } @ReactProp(name = ViewProps.COLOR, customType = "Color") From 180363d4cf4ed2a0a8045d8c03cf34e2e0e90803 Mon Sep 17 00:00:00 2001 From: "kunal.chavhan" Date: Thu, 4 Jul 2024 15:57:42 +0530 Subject: [PATCH 2/3] fix: add sample for autofocus and selelect text on focus in RN-Tester --- .../TextInput/TextInputSharedExamples.js | 29 ++++++++++++++----- 1 file changed, 22 insertions(+), 7 deletions(-) diff --git a/packages/rn-tester/js/examples/TextInput/TextInputSharedExamples.js b/packages/rn-tester/js/examples/TextInput/TextInputSharedExamples.js index 5309967ea5e3..ef497712f63e 100644 --- a/packages/rn-tester/js/examples/TextInput/TextInputSharedExamples.js +++ b/packages/rn-tester/js/examples/TextInput/TextInputSharedExamples.js @@ -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 ( + this.setState({text: text})} + accessibilityLabel="I am the accessibility label for text input" + /> + ); + } +} class WithLabel extends React.Component<$FlowFixMeProps> { render(): React.Node { return ( @@ -815,14 +835,9 @@ function MultilineStyledTextInput({ module.exports = ([ { - title: 'Auto-focus', + title: 'Auto-focus & select text on focus', render: function (): React.Node { - return ( - - ); + return ; }, }, { From 5fc1d11c4bbcdfda62df9d541a5ee1c6cc75df16 Mon Sep 17 00:00:00 2001 From: "kunal.chavhan" Date: Fri, 12 Jul 2024 19:37:48 +0530 Subject: [PATCH 3/3] fix: check focus before selecting text --- .../java/com/facebook/react/views/textinput/ReactEditText.java | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/react-native/ReactAndroid/src/main/java/com/facebook/react/views/textinput/ReactEditText.java b/packages/react-native/ReactAndroid/src/main/java/com/facebook/react/views/textinput/ReactEditText.java index 4b212e5ef22a..2dab13c17854 100644 --- a/packages/react-native/ReactAndroid/src/main/java/com/facebook/react/views/textinput/ReactEditText.java +++ b/packages/react-native/ReactAndroid/src/main/java/com/facebook/react/views/textinput/ReactEditText.java @@ -239,7 +239,7 @@ public boolean isLayoutRequested() { @Override protected void onLayout(boolean changed, int left, int top, int right, int bottom) { onContentSizeChange(); - if (mSelectTextOnFocus) { + if (mSelectTextOnFocus && isFocused()) { // Explicitly call this method to select text when layout is drawn selectAll(); // Prevent text on being selected for next layout pass