Skip to content

Commit 085d021

Browse files
elicwhiteelicwhite
authored
[Native] Migrate focus/blur to call TextInputState with the host component (facebook#18068)
1 parent 7e770da commit 085d021

File tree

5 files changed

+82
-5
lines changed

5 files changed

+82
-5
lines changed

‎packages/react-native-renderer/src/ReactFabricHostConfig.js

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -104,11 +104,11 @@ class ReactFabricHostComponent {
104104
}
105105

106106
blur() {
107-
TextInputState.blurTextInput(this._nativeTag);
107+
TextInputState.blurTextInput(this);
108108
}
109109

110110
focus() {
111-
TextInputState.focusTextInput(this._nativeTag);
111+
TextInputState.focusTextInput(this);
112112
}
113113

114114
measure(callback: MeasureOnSuccessCallback) {

‎packages/react-native-renderer/src/ReactNativeFiberHostComponent.js

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -40,11 +40,11 @@ class ReactNativeFiberHostComponent {
4040
}
4141

4242
blur() {
43-
TextInputState.blurTextInput(this._nativeTag);
43+
TextInputState.blurTextInput(this);
4444
}
4545

4646
focus() {
47-
TextInputState.focusTextInput(this._nativeTag);
47+
TextInputState.focusTextInput(this);
4848
}
4949

5050
measure(callback: MeasureOnSuccessCallback) {

‎packages/react-native-renderer/src/__mocks__/react-native/Libraries/ReactPrivate/TextInputState.js

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,9 @@
1010
// Mock of the Native Hooks
1111
// TODO: Should this move into the components themselves? E.g. focusable
1212

13-
const TextInputState = {};
13+
const TextInputState = {
14+
blurTextInput: jest.fn(),
15+
focusTextInput: jest.fn(),
16+
};
1417

1518
module.exports = TextInputState;

‎packages/react-native-renderer/src/__tests__/ReactFabric-test.internal.js

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,7 @@ let ReactFeatureFlags;
1616
let createReactNativeComponentClass;
1717
let UIManager;
1818
let StrictMode;
19+
let TextInputState;
1920

2021
const SET_NATIVE_PROPS_NOT_SUPPORTED_MESSAGE =
2122
'Warning: setNativeProps is not currently supported in Fabric';
@@ -42,6 +43,8 @@ describe('ReactFabric', () => {
4243
.UIManager;
4344
createReactNativeComponentClass = require('react-native/Libraries/ReactPrivate/ReactNativePrivateInterface')
4445
.ReactNativeViewConfigRegistry.register;
46+
TextInputState = require('react-native/Libraries/ReactPrivate/ReactNativePrivateInterface')
47+
.TextInputState;
4548
});
4649

4750
it('should be able to create and render a native component', () => {
@@ -991,4 +994,38 @@ describe('ReactFabric', () => {
991994
]);
992995
expect(match).toBe(child._nativeTag);
993996
});
997+
998+
it('blur on host component calls TextInputState', () => {
999+
const View = createReactNativeComponentClass('RCTView', () => ({
1000+
validAttributes: {foo: true},
1001+
uiViewClassName: 'RCTView',
1002+
}));
1003+
1004+
let viewRef = React.createRef();
1005+
ReactFabric.render(<View ref={viewRef} />, 11);
1006+
1007+
expect(TextInputState.blurTextInput).not.toBeCalled();
1008+
1009+
viewRef.current.blur();
1010+
1011+
expect(TextInputState.blurTextInput).toHaveBeenCalledTimes(1);
1012+
expect(TextInputState.blurTextInput).toHaveBeenCalledWith(viewRef.current);
1013+
});
1014+
1015+
it('focus on host component calls TextInputState', () => {
1016+
const View = createReactNativeComponentClass('RCTView', () => ({
1017+
validAttributes: {foo: true},
1018+
uiViewClassName: 'RCTView',
1019+
}));
1020+
1021+
let viewRef = React.createRef();
1022+
ReactFabric.render(<View ref={viewRef} />, 11);
1023+
1024+
expect(TextInputState.focusTextInput).not.toBeCalled();
1025+
1026+
viewRef.current.focus();
1027+
1028+
expect(TextInputState.focusTextInput).toHaveBeenCalledTimes(1);
1029+
expect(TextInputState.focusTextInput).toHaveBeenCalledWith(viewRef.current);
1030+
});
9941031
});

‎packages/react-native-renderer/src/__tests__/ReactNativeMount-test.internal.js

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,7 @@ let StrictMode;
1515
let ReactNative;
1616
let createReactNativeComponentClass;
1717
let UIManager;
18+
let TextInputState;
1819

1920
const DISPATCH_COMMAND_REQUIRES_HOST_COMPONENT =
2021
"Warning: dispatchCommand was called with a ref that isn't a " +
@@ -31,6 +32,8 @@ describe('ReactNative', () => {
3132
.UIManager;
3233
createReactNativeComponentClass = require('react-native/Libraries/ReactPrivate/ReactNativePrivateInterface')
3334
.ReactNativeViewConfigRegistry.register;
35+
TextInputState = require('react-native/Libraries/ReactPrivate/ReactNativePrivateInterface')
36+
.TextInputState;
3437
});
3538

3639
it('should be able to create and render a native component', () => {
@@ -594,4 +597,38 @@ describe('ReactNative', () => {
594597
]);
595598
expect(match).toBe(child._nativeTag);
596599
});
600+
601+
it('blur on host component calls TextInputState', () => {
602+
const View = createReactNativeComponentClass('RCTView', () => ({
603+
validAttributes: {foo: true},
604+
uiViewClassName: 'RCTView',
605+
}));
606+
607+
let viewRef = React.createRef();
608+
ReactNative.render(<View ref={viewRef} />, 11);
609+
610+
expect(TextInputState.blurTextInput).not.toBeCalled();
611+
612+
viewRef.current.blur();
613+
614+
expect(TextInputState.blurTextInput).toHaveBeenCalledTimes(1);
615+
expect(TextInputState.blurTextInput).toHaveBeenCalledWith(viewRef.current);
616+
});
617+
618+
it('focus on host component calls TextInputState', () => {
619+
const View = createReactNativeComponentClass('RCTView', () => ({
620+
validAttributes: {foo: true},
621+
uiViewClassName: 'RCTView',
622+
}));
623+
624+
let viewRef = React.createRef();
625+
ReactNative.render(<View ref={viewRef} />, 11);
626+
627+
expect(TextInputState.focusTextInput).not.toBeCalled();
628+
629+
viewRef.current.focus();
630+
631+
expect(TextInputState.focusTextInput).toHaveBeenCalledTimes(1);
632+
expect(TextInputState.focusTextInput).toHaveBeenCalledWith(viewRef.current);
633+
});
597634
});

0 commit comments

Comments
 (0)