react-native-auto-positioned-popup 1.0.12 → 1.0.14

package/src/AutoPositionedPopupProps.ts

@@ -23,10 +23,10 @@ export interface AutoPositionedPopupProps {
   tag: string;
   tagStyle?: ViewStyle;
   fetchData?: ({
-    pageIndex,
-    pageSize,
-    searchQuery,
-  }: {
+                 pageIndex,
+                 pageSize,
+                 searchQuery,
+               }: {
     pageIndex: number;
     pageSize: number;
     searchQuery?: string;
@@ -45,12 +45,18 @@ export interface AutoPositionedPopupProps {
   keyExtractor?: (item: SelectedItem) => string;
   CustomPopView?: () => React.ComponentType<
     ViewStyle & {
-      children?: React.ReactNode;
-      selectedItem?: SelectedItem | any;
-    }
+    children?: React.ReactNode;
+    selectedItem?: SelectedItem | any;
+  }
   >;
   CustomPopViewStyle?: ViewStyle;
   forceRemoveAllRootViewOnItemSelected?: boolean;
+  /**
+   * inputStyle={stableTransparentInputStyle}
+   *  const stableTransparentInputStyle = useMemo(() => {
+   *     return mode === 'light' ? {backgroundColor: 'transparent'} : false;
+   *   }, [mode]);
+   */
   inputStyle?: StyleProp<TextStyle>;
   TextInputProps?: TextInputProps;
   popUpViewStyle?: ViewStyle;

package/src/KeyboardManager.tsx

@@ -1,6 +1,7 @@
 import React, { useEffect, useState, useRef } from 'react';
 import { Keyboard, EmitterSubscription, Platform } from 'react-native';
 
+// Debounce function
 const debounce = (func: Function, delay: number) => {
   let timer: NodeJS.Timeout;
   return (...args: any[]) => {
@@ -12,68 +13,91 @@ const debounce = (func: Function, delay: number) => {
 export const useKeyboardStatus = () => {
   const [isKeyboardFullyShown, setIsKeyboardFullyShown] = useState(false);
 
-  // 使用防抖包裝狀態更新函數
-  const debouncedSetKeyboardShown = useRef(
-    debounce((value: boolean) => {
-      console.log('KeyboardManager: Setting keyboard status to', value);
+  // Add state cache to avoid repeatedly setting the same state
+  const currentKeyboardStatusRef = useRef<boolean>(false);
+  const lastUpdateTimeRef = useRef<number>(0);
+  const pendingValueRef = useRef<boolean | null>(null);
+
+  // Wrapper function: check state before debounce
+  const safeSetKeyboardShown = useRef((value: boolean) => {
+    const currentTime = Date.now();
+    const timeSinceLastUpdate = currentTime - lastUpdateTimeRef.current;
+
+    // ✅ FIX: Check state before debounce
+    if (currentKeyboardStatusRef.current === value) {
+      console.log('KeyboardManager: Skip - Keyboard state unchanged (before debounce)', { value, timeSinceLastUpdate });
+      return;
+    }
+
+    // ✅ FIX: Skip if the same value is already pending
+    if (pendingValueRef.current === value) {
+      console.log('KeyboardManager: Skip - Same value already in processing queue', { value });
+      return;
+    }
+
+    // ✅ FIX: Mark the value being processed
+    pendingValueRef.current = value;
+
+    // Call the actual update function
+    debouncedSetKeyboardShownInternal(value, currentTime, timeSinceLastUpdate);
+  }).current;
+
+  // Internal debounce function
+  const debouncedSetKeyboardShownInternal = useRef(
+    debounce((value: boolean, currentTime: number, timeSinceLastUpdate: number) => {
+      // ✅ FIX: Check state again (in case state was updated during debounce)
+      if (currentKeyboardStatusRef.current === value) {
+        console.log('KeyboardManager: Skip - Keyboard state unchanged (after debounce)', { value, timeSinceLastUpdate });
+        pendingValueRef.current = null;
+        return;
+      }
+
+      console.log('KeyboardManager: Setting keyboard status to', value, {
+        previousValue: currentKeyboardStatusRef.current,
+        timeSinceLastUpdate
+      });
+
+      currentKeyboardStatusRef.current = value;
+      lastUpdateTimeRef.current = currentTime;
+      pendingValueRef.current = null;
       setIsKeyboardFullyShown(value);
     }, 300)
   ).current;
 
+  // Use the wrapped function
+  const debouncedSetKeyboardShown = safeSetKeyboardShown;
+
   useEffect(() => {
-    let keyboardWillShowListener: EmitterSubscription;
     let keyboardDidShowListener: EmitterSubscription;
-    let keyboardWillHideListener: EmitterSubscription;
     let keyboardDidHideListener: EmitterSubscription;
 
-    if (Platform.OS === 'ios') {
-      keyboardWillShowListener = Keyboard.addListener(
-        'keyboardWillShow',
-        () => {
-          debouncedSetKeyboardShown(false);
-        }
-      );
-      keyboardDidShowListener = Keyboard.addListener(
-        'keyboardDidShow',
-        () => {
-          debouncedSetKeyboardShown(true);
-        }
-      );
-      keyboardWillHideListener = Keyboard.addListener(
-        'keyboardWillHide',
-        () => {
-          debouncedSetKeyboardShown(false);
-        }
-      );
-      keyboardDidHideListener = Keyboard.addListener(
-        'keyboardDidHide',
-        () => {
-          debouncedSetKeyboardShown(false);
-        }
-      );
-    } else {
-      keyboardDidShowListener = Keyboard.addListener(
-        'keyboardDidShow',
-        () => {
-          debouncedSetKeyboardShown(true);
+    // ✅ FIX: Use the same logic for iOS and Android - only listen to Did events
+    // Remove Will event listeners to avoid duplicate triggers and state race conditions
+    keyboardDidShowListener = Keyboard.addListener(
+      'keyboardDidShow',
+      () => {
+        // ✅ FIX: Add protection at event listener level - skip if keyboard is already open
+        if (currentKeyboardStatusRef.current === true) {
+          console.log('KeyboardManager: Skip keyboardDidShow event - Keyboard is already open');
+          return;
         }
-      );
-      keyboardDidHideListener = Keyboard.addListener(
-        'keyboardDidHide',
-        () => {
-          debouncedSetKeyboardShown(false);
+        debouncedSetKeyboardShown(true);
+      }
+    );
+    keyboardDidHideListener = Keyboard.addListener(
+      'keyboardDidHide',
+      () => {
+        // ✅ FIX: Add protection at event listener level - skip if keyboard is already closed
+        if (currentKeyboardStatusRef.current === false) {
+          console.log('KeyboardManager: Skip keyboardDidHide event - Keyboard is already closed');
+          return;
         }
-      );
-    }
+        debouncedSetKeyboardShown(false);
+      }
+    );
 
     return () => {
-      if (Platform.OS === 'ios') {
-        keyboardWillShowListener?.remove();
-      }
       keyboardDidShowListener?.remove();
-      if (Platform.OS === 'ios') {
-        keyboardWillHideListener?.remove();
-      }
       keyboardDidHideListener?.remove();
     };
   }, []);

package/src/RootViewContext.tsx

@@ -1,5 +1,5 @@
-import React, { ReactNode, createContext, useContext, useEffect, useMemo, useRef, useState } from 'react';
-import { Pressable, View, ViewStyle,Keyboard } from 'react-native';
+import React, {ReactNode, createContext, useContext, useEffect, useMemo, useRef, useState} from 'react';
+import {Pressable, View, ViewStyle, Keyboard} from 'react-native';
 
 interface DynamicViewBase {
   id: string;
@@ -30,41 +30,48 @@ const RootViewContext = createContext<RootViewContextType | undefined>(undefined
  * @param children
  * @constructor
  */
-export const RootViewProvider: React.FC<RootViewProviderProps> = ({ children }) => {
+export const RootViewProvider: React.FC<RootViewProviderProps> = ({children}) => {
   const [rootViews, setRootViews] = useState<DynamicViewBase[]>([]);
   const [searchQuery, setSearchQuery] = useState<string>('');
   const viewRefs = useRef<Record<string, View>>({});
   useEffect(() => {
-    console.log('RootViewProvider rootViews changed:', rootViews);
+    console.log('react-native-auto-positioned-popup RootViewProvider rootViews changed:', rootViews);
   }, [rootViews]);
   const addRootView = (view: DynamicViewBase): void => {
     // const id = `dynamic-view-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`;
-    const newView: DynamicViewBase = { ...view };
-    console.log('RootViewProvider addRootView rootViews=', rootViews);
-    console.log('RootViewProvider addRootView newView=', newView);
+    const newView: DynamicViewBase = {...view};
+    console.log('react-native-auto-positioned-popup RootViewProvider addRootView rootViews=', rootViews);
+    console.log('react-native-auto-positioned-popup RootViewProvider addRootView newView=', newView);
     setRootViews((prev) => [...prev, newView]);
   };
 
   const updateRootView = (id: string, update: Partial<DynamicViewBase>): void => {
-    setRootViews((prev) => prev.map((view) => (view.id === id ? { ...view, ...update } : view)));
+    setRootViews((prev) => prev.map((view) => (view.id === id ? {...view, ...update} : view)));
   };
 
+  /**
+   * onScrollBeginDrag={() => {
+   *                   requestAnimationFrame(() => {
+   *                     removeRootView(undefined, true)
+   *                   })
+   *                 }}
+   * @param id
+   * @param force
+   * @param _rootViews
+   */
   const removeRootView = (id?: string, force?: boolean, _rootViews?: DynamicViewBase[]): void => {
-    console.log('RootViewProvider removeRootView id=', id);
-    console.log('RootViewProvider removeRootView force=', force);
-    console.log('RootViewProvider removeRootView rootViews=', rootViews);
-    console.log('RootViewProvider removeRootView _rootViews=', _rootViews);
-
+    console.log('react-native-auto-positioned-popup RootViewProvider removeRootView=', {id, force, rootViews, _rootViews});
     // Ensure keyboard is dismissed when force removing all root views
     if (force) {
       // Dismiss keyboard first
       Keyboard.dismiss();
-
-      // Small delay to ensure keyboard is dismissed before removing views
+      // IMPORTANT: Increased delay from 50ms to 100ms to prevent touch event loss
+      // Keyboard dismiss animation takes ~250-300ms, but we don't need to wait for it to fully complete
+      // 100ms gives touch event system enough time to process pending events before views are removed
       setTimeout(() => {
         setRootViews((prev) => []);
-        console.log('RootViewProvider removeRootView setRootViews(prev => []) force=true');
-      }, 50);
+        console.log('react-native-auto-positioned-popup RootViewProvider removeRootView setRootViews(prev => []) force=true');
+      }, 100);
       return;
     }
     if (rootViews.length > 0 && id) {
@@ -82,7 +89,7 @@ export const RootViewProvider: React.FC<RootViewProviderProps> = ({ children })
     const target = viewRefs.current[id];
     if (target) {
       // @ts-ignore - React Native setNativeProps
-      target.setNativeProps({ style });
+      target.setNativeProps({style});
     }
   };
 
@@ -104,19 +111,15 @@ export const RootViewProvider: React.FC<RootViewProviderProps> = ({ children })
       <>
         {children}
         {rootViews.map(
-          ({ id, style, component, useModal, onModalClose, centerDisplay }: DynamicViewBase): React.JSX.Element => {
-            console.log('RootViewProvider rootViews.map id=', id);
-            console.log('RootViewProvider rootViews.map style=', style);
-            console.log('RootViewProvider rootViews.map component=', component);
-            console.log('RootViewProvider rootViews.map useModal=', useModal);
-            console.log('RootViewProvider rootViews.map centerDisplay=', centerDisplay);
+          ({id, style, component, useModal, onModalClose, centerDisplay}: DynamicViewBase): React.JSX.Element => {
+            console.log('react-native-auto-positioned-popup RootViewProvider rootViews.map=', {id, style, component, useModal, centerDisplay});
             return !useModal ? (
               <View
                 key={id}
                 ref={(r) => {
                   if (r) viewRefs.current[id] = r;
                 }}
-                style={[style, { position: 'absolute' }]}
+                style={[style, {position: 'absolute'}]}
               >
                 {component}
               </View>
@@ -135,10 +138,10 @@ export const RootViewProvider: React.FC<RootViewProviderProps> = ({ children })
                     zIndex: 99999999999,
                     backgroundColor: 'rgba(0,0,0,0.5)',
                   },
-                  centerDisplay && { justifyContent: 'center', alignItems: 'center' },
+                  centerDisplay && {justifyContent: 'center', alignItems: 'center'},
                 ]}
                 onPress={() => {
-                  console.log('RootViewProvider Pressable onPress rootViews=', rootViews);
+                  console.log('react-native-auto-positioned-popup RootViewProvider Pressable onPress rootViews=', rootViews);
                   removeRootView(id, true);
                   onModalClose && onModalClose();
                 }}
@@ -147,7 +150,7 @@ export const RootViewProvider: React.FC<RootViewProviderProps> = ({ children })
                   ref={(r) => {
                     if (r) viewRefs.current[id] = r;
                   }}
-                  style={[{ position: 'absolute' }, style]}
+                  style={[{position: 'absolute'}, style]}
                 >
                   {component}
                 </View>