Skip to content

Commit e064d80

Browse files
authored
[0.77] [TextInput] Export TI State's focusInput/blurInput (#2463)
[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 2bda4b1 commit e064d80

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
@@ -1084,6 +1084,22 @@ interface TextInputState {
10841084
* noop if it wasn't focused
10851085
*/
10861086
blurTextInput(textField?: HostInstance): void;
1087+
1088+
// [macOS
1089+
/**
1090+
* @param textField ref of the text field that was focused
1091+
* Call on custom implementations of TextInput to notify the control was focused
1092+
* noop if it was already focused
1093+
*/
1094+
onTextInputFocus(textField?: HostInstance): void;
1095+
1096+
/**
1097+
* @param textField ref of the text field that was blurred
1098+
* Call on custom implementations of TextInput to notify the control was blurred
1099+
* noop if it wasn't focused
1100+
*/
1101+
onTextInputBlur(textField?: HostInstance): void;
1102+
// macOS]
10871103
}
10881104

10891105
/**

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

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1249,6 +1249,8 @@ export type TextInputComponentStatics = $ReadOnly<{|
12491249
currentlyFocusedField: () => ?number,
12501250
focusTextInput: (textField: ?HostInstance) => void,
12511251
blurTextInput: (textField: ?HostInstance) => void,
1252+
onTextInputFocus: (textField: ?HostInstance) => void, // [macOS]
1253+
onTextInputBlur: (textField: ?HostInstance) => void, // [macOS]
12521254
|}>,
12531255
|}>;
12541256

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

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2039,6 +2039,8 @@ ExportedForwardRef.State = {
20392039
currentlyFocusedField: TextInputState.currentlyFocusedField,
20402040
focusTextInput: TextInputState.focusTextInput,
20412041
blurTextInput: TextInputState.blurTextInput,
2042+
onTextInputFocus: TextInputState.focusInput, // [macOS]
2043+
onTextInputBlur: TextInputState.blurInput, // [macOS]
20422044
};
20432045

20442046
export type TextInputComponentStatics = $ReadOnly<{|
@@ -2047,6 +2049,8 @@ export type TextInputComponentStatics = $ReadOnly<{|
20472049
currentlyFocusedField: typeof TextInputState.currentlyFocusedField,
20482050
focusTextInput: typeof TextInputState.focusTextInput,
20492051
blurTextInput: typeof TextInputState.blurTextInput,
2052+
onTextInputFocus: typeof TextInputState.focusInput, // [macOS]
2053+
onTextInputBlur: typeof TextInputState.blurInput, // [macOS]
20502054
|}>,
20512055
|}>;
20522056

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
@@ -3231,6 +3231,8 @@ export type TextInputComponentStatics = $ReadOnly<{|
32313231
currentlyFocusedField: () => ?number,
32323232
focusTextInput: (textField: ?HostInstance) => void,
32333233
blurTextInput: (textField: ?HostInstance) => void,
3234+
onTextInputFocus: (textField: ?HostInstance) => void,
3235+
onTextInputBlur: (textField: ?HostInstance) => void,
32343236
|}>,
32353237
|}>;
32363238
export type TextInputType = InternalTextInput & TextInputComponentStatics;
@@ -3629,6 +3631,8 @@ export type TextInputComponentStatics = $ReadOnly<{|
36293631
currentlyFocusedField: typeof TextInputState.currentlyFocusedField,
36303632
focusTextInput: typeof TextInputState.focusTextInput,
36313633
blurTextInput: typeof TextInputState.blurTextInput,
3634+
onTextInputFocus: typeof TextInputState.focusInput,
3635+
onTextInputBlur: typeof TextInputState.blurInput,
36323636
|}>,
36333637
|}>;
36343638
declare module.exports: TextInputType;

0 commit comments

Comments
 (0)