Skip to content

Commit

Permalink
Implement TextInput autoFocus natively on iOS (facebook#27803)
Browse files Browse the repository at this point in the history
Summary:
This implement the autoFocus functionality natively instead of calling the focus method from JS on mount. This is needed to properly fix the issue described in facebook#27217, where when using native navigation (UINavigationController) text input focus needs to happen in the same frame transition starts or it leads to an animation bug in UIKit.

My previous attempt fixed the problem only partially and the bug could still happen since there is no guaranty code executed in useEffect will end up in the same frame as the native view being created and attached.

To fix this I added an autoFocus prop to the native component on iOS and in didAttachToWindow we focus the input if it is set. This makes sure the focus is set in the same frame as the view hierarchy containing the input is created.

[iOS] [Fixed] - Add native support for TextInput autoFocus on iOS
Pull Request resolved: facebook#27803

Test Plan:
- Tested that the UI glitch when transitionning to a screen with an input with autofocus no longer happens in my app.
- Tested that autofocus still works in RNTester
- Made sure that onFocus does get called and TextInputState is updated properly

Differential Revision: D19673369

Pulled By: TheSavior

fbshipit-source-id: 14d8486ac635901622ca667c0e61c75fb446e493
  • Loading branch information
janicduplessis authored and xvonabur committed Mar 4, 2020
1 parent 86cad7d commit 0c5156e
Show file tree
Hide file tree
Showing 3 changed files with 11 additions and 2 deletions.
1 change: 1 addition & 0 deletions Libraries/Text/TextInput/RCTBaseTextInputView.h
Original file line number Diff line number Diff line change
Expand Up @@ -40,6 +40,7 @@ NS_ASSUME_NONNULL_BEGIN
@property (nonatomic, copy, nullable) RCTDirectEventBlock onScroll;

@property (nonatomic, assign) NSInteger mostRecentEventCount;
@property (nonatomic, assign) BOOL autoFocus;
@property (nonatomic, assign) BOOL blurOnSubmit;
@property (nonatomic, assign) BOOL selectTextOnFocus;
@property (nonatomic, assign) BOOL clearTextOnFocus;
Expand Down
9 changes: 8 additions & 1 deletion Libraries/Text/TextInput/RCTBaseTextInputView.m
Original file line number Diff line number Diff line change
Expand Up @@ -26,6 +26,7 @@ @implementation RCTBaseTextInputView {
BOOL _hasInputAccesoryView;
NSString *_Nullable _predictedText;
NSInteger _nativeEventCount;
BOOL _didMoveToWindow;
}

- (instancetype)initWithBridge:(RCTBridge *)bridge
Expand Down Expand Up @@ -541,7 +542,13 @@ - (void)reactBlur

- (void)didMoveToWindow
{
[self.backedTextInputView reactFocusIfNeeded];
if (self.autoFocus && !_didMoveToWindow) {
[self.backedTextInputView reactFocus];
} else {
[self.backedTextInputView reactFocusIfNeeded];
}

_didMoveToWindow = YES;
}

#pragma mark - Custom Input Accessory View
Expand Down
3 changes: 2 additions & 1 deletion Libraries/Text/TextInput/RCTBaseTextInputViewManager.m
Original file line number Diff line number Diff line change
Expand Up @@ -48,7 +48,8 @@ @implementation RCTBaseTextInputViewManager
RCT_REMAP_VIEW_PROPERTY(caretHidden, backedTextInputView.caretHidden, BOOL)
RCT_REMAP_VIEW_PROPERTY(clearButtonMode, backedTextInputView.clearButtonMode, UITextFieldViewMode)
RCT_REMAP_VIEW_PROPERTY(scrollEnabled, backedTextInputView.scrollEnabled, BOOL)
RCT_EXPORT_VIEW_PROPERTY(secureTextEntry, BOOL)
RCT_REMAP_VIEW_PROPERTY(secureTextEntry, backedTextInputView.secureTextEntry, BOOL)
RCT_EXPORT_VIEW_PROPERTY(autoFocus, BOOL)
RCT_EXPORT_VIEW_PROPERTY(blurOnSubmit, BOOL)
RCT_EXPORT_VIEW_PROPERTY(clearTextOnFocus, BOOL)
RCT_EXPORT_VIEW_PROPERTY(keyboardType, UIKeyboardType)
Expand Down

0 comments on commit 0c5156e

Please sign in to comment.