feat: wip focus consistency

Author: exploIF

example/ios/Podfile.lock

@@ -2690,9 +2690,9 @@ SPEC CHECKSUMS:
   ReactAppDependencyProvider: 77a7129540c0e06ab6be9a2bcb887d3d2e594431
   ReactCodegen: b62625187ce853918021a7a9178cc406e9820d56
   ReactCommon: d07170f92e0e853091a70b2741b7c43f5dfdea73
-  ReactNativeEnriched: b11d66700889cd36c9938a825736de1929349b24
+  ReactNativeEnriched: ce7a893fdefce993826a3177da6811b513e26526
   SocketRocket: d4aabe649be1e368d1318fdf28a022d714d65748
-  Yoga: 6af5d1e0290903c82b3e0cb6836a5f898c1c4634
+  Yoga: 47264cc34431da6b66b3687348be283084924f46
 
 PODFILE CHECKSUM: 1b876ae6d1ea0597d954f2089c1213dd3ade28bc
 

example/src/App.tsx

@@ -4,6 +4,7 @@ import {
   Text,
   type NativeSyntheticEvent,
   ScrollView,
+  Keyboard,
 } from 'react-native';
 import {
   EnrichedTextInput,
@@ -62,7 +63,7 @@ const DEFAULT_LINK_STATE = {
   end: 0,
 };
 
-const DEBUG_SCROLLABLE = false;
+const DEBUG_SCROLLABLE = true;
 
 // Enabling this prop fixes input flickering while auto growing.
 // However, it's still experimental and not tested well.
@@ -293,6 +294,11 @@ export default function App() {
           onPress={openValueModal}
           style={styles.valueButton}
         />
+        <Button
+          title="Dismiss keyboard"
+          onPress={Keyboard.dismiss}
+          style={styles.valueButton}
+        />
         <HtmlSection currentHtml={currentHtml} />
         {DEBUG_SCROLLABLE && <View style={styles.scrollPlaceholder} />}
       </ScrollView>

src/EnrichedTextInput.tsx

@@ -2,6 +2,7 @@ import {
   type Component,
   type RefObject,
   useImperativeHandle,
+  useLayoutEffect,
   useMemo,
   useRef,
 } from 'react';
@@ -18,20 +19,23 @@ import EnrichedTextInputNativeComponent, {
   type OnMentionDetectedInternal,
   type MentionStyleProperties,
 } from './EnrichedTextInputNativeComponent';
-import type {
-  ColorValue,
-  HostInstance,
-  MeasureInWindowOnSuccessCallback,
-  MeasureLayoutOnSuccessCallback,
-  MeasureOnSuccessCallback,
-  NativeMethods,
-  NativeSyntheticEvent,
-  TextStyle,
-  ViewProps,
-  ViewStyle,
+import {
+  type ColorValue,
+  type HostInstance,
+  type MeasureInWindowOnSuccessCallback,
+  type MeasureLayoutOnSuccessCallback,
+  type MeasureOnSuccessCallback,
+  type NativeMethods,
+  type NativeSyntheticEvent,
+  type TextStyle,
+  type ViewProps,
+  type ViewStyle,
 } from 'react-native';
 import { normalizeHtmlStyle } from './normalizeHtmlStyle';
 
+//@ts-ignore
+import TextInputState from 'react-native/Libraries/Components/TextInput/TextInputState';
+
 export interface EnrichedTextInputInstance extends NativeMethods {
   // General commands
   focus: () => void;
@@ -297,6 +301,19 @@ export const EnrichedTextInput = ({
     },
   }));
 
+  useLayoutEffect(() => {
+    const inputRef = nativeRef.current;
+    TextInputState.registerInput(inputRef);
+
+    return () => {
+      TextInputState.unregisterInput(inputRef);
+
+      if (TextInputState.currentlyFocusedInput() === inputRef) {
+        inputRef?.blur();
+      }
+    };
+  }, []);
+
   const handleMentionEvent = (e: NativeSyntheticEvent<OnMentionEvent>) => {
     const mentionText = e.nativeEvent.text;
     const mentionIndicator = e.nativeEvent.indicator;
@@ -325,6 +342,16 @@ export const EnrichedTextInput = ({
     onMentionDetected?.({ text, indicator, attributes });
   };
 
+  const _onFocus = () => {
+    TextInputState.focusInput(nativeRef?.current);
+    onFocus?.();
+  };
+
+  const _onBlur = () => {
+    TextInputState.blurInput(nativeRef?.current);
+    onBlur?.();
+  };
+
   return (
     <EnrichedTextInputNativeComponent
       ref={nativeRef}
@@ -339,8 +366,8 @@ export const EnrichedTextInput = ({
       style={style}
       autoCapitalize={autoCapitalize}
       htmlStyle={normalizedHtmlStyle}
-      onInputFocus={onFocus}
-      onInputBlur={onBlur}
+      onInputFocus={_onFocus}
+      onInputBlur={_onBlur}
       onChangeText={onChangeText}
       onChangeHtml={onChangeHtml}
       isOnChangeHtmlSet={onChangeHtml !== undefined}