Skip to content

Commit 9889e73

Browse files
authored
[0.78] [TextInput] Export TI State's focusInput/blurInput (#2462)
[These two functions](https://github.com/microsoft/react-native-macos/blob/9ea059c33143e6766582a1f682e4f144e00cc740/packages/react-native/Libraries/Components/TextInput/TextInputState.js#L60C1-L70C2) are used to [properly handle onFocus\onBlur for TextInput implementations](https://github.com/microsoft/react-native-macos/blob/9ea059c33143e6766582a1f682e4f144e00cc740/packages/react-native/Libraries/Components/TextInput/TextInput.js#L1623C1-L1635C5), specifically they are used to track the currently focused TextInput control and as such cause [focusTextInput](https://github.com/microsoft/react-native-macos/blob/9ea059c33143e6766582a1f682e4f144e00cc740/packages/react-native/Libraries/Components/TextInput/TextInputState.js#L106C1-L106C48) and [blurTextInput](https://github.com/microsoft/react-native-macos/blob/9ea059c33143e6766582a1f682e4f144e00cc740/packages/react-native/Libraries/Components/TextInput/TextInputState.js#L143C1-L143C69) to skip native focus\blur calls if the JS side thinks the control in question is already focused\blurred. In other words, if someone wants to build a custom `<TextInput>` from the ground up, they can't expect `focusTextInput`, `blurTextInput`, and `currentlyFocusedInput` (the last one which is especially already used in a bunch of places in the framework) to work properly. This change exports the necessary `focusInput` and `blurInput` out of [TextInput](https://github.com/microsoft/react-native-macos/blob/9ea059c33143e6766582a1f682e4f144e00cc740/packages/react-native/Libraries/Components/TextInput/TextInput.js#L2041C1-L2048C3) statics.
1 parent c695eb6 commit 9889e73

File tree

4 files changed

+26
-0
lines changed

4 files changed

+26
-0
lines changed

packages/react-native/Libraries/Components/TextInput/TextInput.d.ts

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1089,6 +1089,22 @@ interface TextInputState {
10891089
* noop if it wasn't focused
10901090
*/
10911091
blurTextInput(textField?: HostInstance): void;
1092+
1093+
// [macOS
1094+
/**
1095+
* @param textField ref of the text field that was focused
1096+
* Call on custom implementations of TextInput to notify the control was focused
1097+
* noop if it was already focused
1098+
*/
1099+
onTextInputFocus(textField?: HostInstance): void;
1100+
1101+
/**
1102+
* @param textField ref of the text field that was blurred
1103+
* Call on custom implementations of TextInput to notify the control was blurred
1104+
* noop if it wasn't focused
1105+
*/
1106+
onTextInputBlur(textField?: HostInstance): void;
1107+
// macOS]
10921108
}
10931109

10941110
/**

packages/react-native/Libraries/Components/TextInput/TextInput.flow.js

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1255,6 +1255,8 @@ export type TextInputComponentStatics = $ReadOnly<{|
12551255
currentlyFocusedField: () => ?number,
12561256
focusTextInput: (textField: ?HostInstance) => void,
12571257
blurTextInput: (textField: ?HostInstance) => void,
1258+
onTextInputFocus: (textField: ?HostInstance) => void, // [macOS]
1259+
onTextInputBlur: (textField: ?HostInstance) => void, // [macOS]
12581260
|}>,
12591261
|}>;
12601262

packages/react-native/Libraries/Components/TextInput/TextInput.js

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2045,6 +2045,8 @@ ExportedForwardRef.State = {
20452045
currentlyFocusedField: TextInputState.currentlyFocusedField,
20462046
focusTextInput: TextInputState.focusTextInput,
20472047
blurTextInput: TextInputState.blurTextInput,
2048+
onTextInputFocus: TextInputState.focusInput, // [macOS]
2049+
onTextInputBlur: TextInputState.blurInput, // [macOS]
20482050
};
20492051

20502052
export type TextInputComponentStatics = $ReadOnly<{|
@@ -2053,6 +2055,8 @@ export type TextInputComponentStatics = $ReadOnly<{|
20532055
currentlyFocusedField: typeof TextInputState.currentlyFocusedField,
20542056
focusTextInput: typeof TextInputState.focusTextInput,
20552057
blurTextInput: typeof TextInputState.blurTextInput,
2058+
onTextInputFocus: typeof TextInputState.focusInput, // [macOS]
2059+
onTextInputBlur: typeof TextInputState.blurInput, // [macOS]
20562060
|}>,
20572061
|}>;
20582062

packages/react-native/Libraries/__tests__/__snapshots__/public-api-test.js.snap

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3304,6 +3304,8 @@ export type TextInputComponentStatics = $ReadOnly<{|
33043304
currentlyFocusedField: () => ?number,
33053305
focusTextInput: (textField: ?HostInstance) => void,
33063306
blurTextInput: (textField: ?HostInstance) => void,
3307+
onTextInputFocus: (textField: ?HostInstance) => void,
3308+
onTextInputBlur: (textField: ?HostInstance) => void,
33073309
|}>,
33083310
|}>;
33093311
export type TextInputType = InternalTextInput & TextInputComponentStatics;
@@ -3703,6 +3705,8 @@ export type TextInputComponentStatics = $ReadOnly<{|
37033705
currentlyFocusedField: typeof TextInputState.currentlyFocusedField,
37043706
focusTextInput: typeof TextInputState.focusTextInput,
37053707
blurTextInput: typeof TextInputState.blurTextInput,
3708+
onTextInputFocus: typeof TextInputState.focusInput,
3709+
onTextInputBlur: typeof TextInputState.blurInput,
37063710
|}>,
37073711
|}>;
37083712
declare module.exports: TextInputType;

0 commit comments

Comments
 (0)