Pressing on dismiss (x) only fully works the second time - a very complex fix

Author: M-i-k-e-l

lib/components/Keyboard/KeyboardInput/CustomKeyboardView/CustomKeyboardView.android.tsx

@@ -10,19 +10,24 @@ export default class CustomKeyboardView extends CustomKeyboardViewBase<CustomKey
   static displayName = 'IGNORE';
 
   async componentDidUpdate(prevProps: CustomKeyboardViewBaseProps) {
-    const {component, inputRef} = this.props;
+    const {component, inputRef, shouldFocus, onKeyboardDismiss} = this.props;
 
     if (prevProps.component !== component) {
+      
       if (!component) {
-        await TextInputKeyboardManager.reset();
-        if (inputRef?.current) {
-          inputRef.current.focus?.();
-        } else {
-          inputRef?.focus?.();
+        // await TextInputKeyboardManager.reset();
+        if (shouldFocus) {
+          if (inputRef?.current) {
+            inputRef.current.focus?.();
+          } else {
+            inputRef?.focus?.();
+          }
         }
       } else {
         Keyboard.dismiss();
       }
+
+      onKeyboardDismiss?.();
     }
 
     super.componentDidUpdate(prevProps);

lib/components/Keyboard/KeyboardInput/CustomKeyboardViewBase.tsx

@@ -6,6 +6,8 @@ export type CustomKeyboardViewBaseProps = {
   inputRef?: any;
   initialProps?: any;
   keyboardHeight?: number;
+  onKeyboardDismiss?: () => void;
+  shouldFocus?: boolean;
   component?: string;
   onItemSelected?: (component?: string, args?: any) => void;
   onRequestShowKeyboard?: (keyboardId: string) => void;

lib/components/Keyboard/KeyboardInput/KeyboardAccessoryView.tsx

@@ -73,10 +73,13 @@ class KeyboardAccessoryView extends Component<KeyboardAccessoryViewProps> {
     scrollBehavior: KeyboardTrackingView.scrollBehaviors.FIXED_OFFSET
   };
 
+  static currentId = 0;
+
   // TODO: fix
   customInputControllerEventsSubscriber: any;
   trackingViewRef: any;
   subscription: any;
+  id: number = ++KeyboardAccessoryView.currentId;
 
   constructor(props: KeyboardAccessoryViewProps) {
     super(props);
@@ -92,7 +95,8 @@ class KeyboardAccessoryView extends Component<KeyboardAccessoryViewProps> {
   }
 
   state = {
-    keyboardHeight: 0
+    keyboardHeight: 0,
+    shouldFocus: true
   };
 
   componentWillUnmount() {
@@ -176,8 +180,16 @@ class KeyboardAccessoryView extends Component<KeyboardAccessoryViewProps> {
     this.setState({keyboardHeight});
   };
 
+  onDismiss = () => {
+    this.setState({shouldFocus: false});
+  };
+
+  onKeyboardDismiss = () => {
+    this.setState({shouldFocus: true});
+  };
+
   render() {
-    const {keyboardHeight} = this.state;
+    const {keyboardHeight, shouldFocus} = this.state;
     const {
       renderContent,
       kbInputRef,
@@ -196,10 +208,16 @@ class KeyboardAccessoryView extends Component<KeyboardAccessoryViewProps> {
         style={styles.trackingToolbarContainer}
         onLayout={this.onContainerComponentHeightChanged}
       >
-        <KeyboardHeightListener onKeyboardHeightChange={this.onKeyboardHeightChange}/>
+        <KeyboardHeightListener
+          id={`${this.id}`}
+          onDismiss={this.onDismiss}
+          onKeyboardHeightChange={this.onKeyboardHeightChange}
+        />
         <>{renderContent?.()}</>
         <CustomKeyboardView
           keyboardHeight={keyboardHeight}
+          shouldFocus={shouldFocus}
+          onKeyboardDismiss={this.onKeyboardDismiss}
           inputRef={kbInputRef}
           component={kbComponent}
           initialProps={this.processInitialProps()}

lib/components/Keyboard/KeyboardInput/utils/KeyboardUtils.ts

@@ -7,16 +7,38 @@ const DEFAULT_KEYBOARD_HEIGHT = IS_IOS ? 216 : 312; // TODO: verify this value f
 
 export default class KeyboardUtils {
   static displayName = 'KeyboardUtils';
+  private static listeners: {[key: string]: () => void} = {};
+
+  private static addListener = (id: string, onDismiss?: () => void) => {
+    if (id && onDismiss && !KeyboardUtils.listeners[id]) {
+      KeyboardUtils.listeners[id] = onDismiss;
+    }
+  };
+
+  private static removeListener = (id: string) => {
+    if (id && KeyboardUtils.listeners[id]) {
+      delete KeyboardUtils.listeners[id];
+    }
+  };
+
   /**
    * Used to dismiss (close) the keyboard.
    */
   static dismiss = () => {
     Keyboard.dismiss();
     TextInputKeyboardManager.dismissKeyboard();
+    Object.keys(KeyboardUtils.listeners).forEach(key => {
+      KeyboardUtils.listeners[key]();
+    });
   };
 }
 
-const useKeyboardHeight = () => {
+interface KeyboardHeightProps {
+  id: string;
+  onDismiss: () => void;
+}
+
+const useKeyboardHeight = ({id, onDismiss}: KeyboardHeightProps) => {
   const [isInitialized, setIsInitialized] = useState(false);
   const [keyboardHeight, setKeyboardHeight] = useState(DEFAULT_KEYBOARD_HEIGHT);
   const [isVisible, setIsVisible] = useState(false);
@@ -37,9 +59,13 @@ const useKeyboardHeight = () => {
   useEffect(() => {
     const keyboardDidShowListener = Keyboard.addListener('keyboardDidShow', keyboardDidShow);
     const keyboardDidHideListener = Keyboard.addListener('keyboardDidHide', keyboardDidHide);
+    // @ts-ignore
+    KeyboardUtils.addListener(id, onDismiss);
     return () => {
       keyboardDidShowListener.remove();
       keyboardDidHideListener.remove();
+      // @ts-ignore
+      KeyboardUtils.removeListener(id);
     };
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
@@ -48,12 +74,19 @@ const useKeyboardHeight = () => {
 };
 
 export interface KeyboardHeightListenerProps {
+  id: string;
+  onDismiss: () => void;
   onKeyboardHeightChange?: (height: number) => void;
   onKeyboardVisibilityChange?: (isKeyboardVisible: boolean) => void;
 }
 
-const KeyboardHeightListener = ({onKeyboardHeightChange, onKeyboardVisibilityChange}: KeyboardHeightListenerProps) => {
-  const {keyboardHeight, isKeyboardVisible} = useKeyboardHeight();
+const KeyboardHeightListener = ({
+  id,
+  onDismiss,
+  onKeyboardHeightChange,
+  onKeyboardVisibilityChange
+}: KeyboardHeightListenerProps) => {
+  const {keyboardHeight, isKeyboardVisible} = useKeyboardHeight({id, onDismiss});
 
   useEffect(() => {
     onKeyboardHeightChange?.(keyboardHeight);