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

package/lib/AutoPositionedPopup.js

@@ -34,9 +34,7 @@ const ListItem = memo(({ updateState, item, index, selectedItem, }) => {
         rootViewsRef.current = rootViews;
     }, [rootViews]);
     return useMemo(() => {
-        // console.log('AutoPositionedPopup.tsx ListItem index=', index);
-        console.log('AutoPositionedPopup.tsx ListItem item=', item);
-        console.log('AutoPositionedPopup.tsx ListItem selectedItem=', selectedItem);
+        // console.log('AutoPositionedPopup.tsx ListItem=', {index, item, selectedItem});
         const isSelected = item.id === (selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.id);
         return (<TouchableOpacity key={item.id} style={[
                 styles.commonModalRow,
@@ -79,8 +77,8 @@ const AutoPositionedPopupList = memo(({ tag, updateState, fetchData, keyExtracto
         };
     }, []);
     // useEffect(() => {
-    //   // 監聽 TextInput 事件，收到就刷新列表，不依賴 global searchQuery
-    //   // 將最新的 searchQuery 同步到 list 專用的 ref，供 _fetchData 使用
+    //   // Listen to TextInput events, refresh list when received, not dependent on global searchQuery
+    //   // Sync the latest searchQuery to list-specific ref for _fetchData to use
     //   ref_searchQuery.current = searchQuery;
     //   console.log('AutoPositionedPopupList useEffect searchQuery=', searchQuery);
     //   console.log('AutoPositionedPopupList useEffect state.localData=', state.localData);
@@ -109,10 +107,7 @@ const AutoPositionedPopupList = memo(({ tag, updateState, fetchData, keyExtracto
         updateState(key, value);
     };
     const _fetchData = async ({ pageIndex, pageSize: currentPageSize, }) => {
-        console.log('AutoPositionedPopupList _fetchData pageIndex=', pageIndex, ' pageSize=', currentPageSize);
-        console.log('AutoPositionedPopupList _fetchData state.localData=', state.localData);
-        console.log('AutoPositionedPopupList _fetchData ref_searchQuery.current=', ref_searchQuery.current);
-        console.log('AutoPositionedPopupList _fetchData localSearch=', localSearch);
+        console.log('AutoPositionedPopupList _fetchData=', { pageIndex, pageSize: currentPageSize, 'state.localData': state.localData, 'ref_searchQuery.current': ref_searchQuery.current, localSearch });
         if (localSearch && state.localData.length > 0) {
             const result = state.localData.filter((item) => {
                 var _a;
@@ -183,7 +178,7 @@ const listLayout = {
 // Main AutoPositionedPopup component
 const AutoPositionedPopup = memo(forwardRef((props, parentRef) => {
     console.log('AutoPositionedPopup props=', props);
-    const { tag, style, AutoPositionedPopupBtnStyle, placeholder = 'Please Select', onSubmitEditing, TextInputProps = {}, inputStyle, labelStyle, popUpViewStyle = { left: '5%', width: '90%' }, fetchData = async ({ pageIndex, pageSize, searchQuery, }) => {
+    const { tag, style, AutoPositionedPopupBtnStyle, placeholder = 'Please Select', onSubmitEditing, TextInputProps = { autoFocus: true }, inputStyle, labelStyle, popUpViewStyle = { left: '5%', width: '90%' }, fetchData = async ({ pageIndex, pageSize, searchQuery, }) => {
         const res = {
             items: [],
             pageIndex,
@@ -219,6 +214,16 @@ const AutoPositionedPopup = memo(forwardRef((props, parentRef) => {
     const keyboardVisibleRef = useRef(false);
     const refAutoPositionedPopup = useRef(null);
     const ref_searchQuery = useRef('');
+    // Add ref to track previous keyboard state to avoid false triggers during parent component re-renders
+    const prevIsKeyboardFullyShownRef = useRef(false);
+    const prevPropsRef = useRef({});
+    // Add ref to prevent onFocus/onBlur loop triggers during parent component re-renders
+    const lastFocusTimeRef = useRef(0);
+    const isFocusEventProcessingRef = useRef(false);
+    // Add ref to stabilize TextInput props reference
+    // Only update when deep comparison detects real changes to avoid TextInput recreation due to reference changes during parent component redraws
+    const stableInputStyleRef = useRef(inputStyle);
+    const stableTextInputPropsRef = useRef(TextInputProps);
     // Simple keyboard status tracking (alternative to useKeyboardStatus hook)
     // Legacy state for compatibility
     const [isVisible, setIsVisible] = useState(false);
@@ -240,8 +245,7 @@ const AutoPositionedPopup = memo(forwardRef((props, parentRef) => {
     useEffect(() => {
         (async () => {
         })();
-        console.log(`AutoPositionedPopup componentDidMount tag=`, tag);
-        console.log('AutoPositionedPopup componentDidMount CustomPopView=', CustomPopView);
+        console.log(`AutoPositionedPopup componentDidMount=`, { tag, CustomPopView });
         //componentWillUnmount
         return () => {
             console.log(`AutoPositionedPopup componentWillUnmount tag=`, tag);
@@ -272,8 +276,7 @@ const AutoPositionedPopup = memo(forwardRef((props, parentRef) => {
     }, [rootViews]);
     useEffect(() => {
         var _a, _b;
-        console.log('AutoPositionedPopup useEffect tag=', tag);
-        console.log('AutoPositionedPopup useEffect selectedItem=', selectedItem);
+        console.log('AutoPositionedPopup useEffect [selectedItem, state.selectedItem, tag]=', { tag, selectedItem, 'state.selectedItem': state.selectedItem });
         console.log('AutoPositionedPopup useEffect state.selectedItem=', state.selectedItem);
         if (((_a = state.selectedItem) === null || _a === void 0 ? void 0 : _a.id) !== (selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.id) || ((_b = state.selectedItem) === null || _b === void 0 ? void 0 : _b.title) !== (selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.title)) {
             console.log('AutoPositionedPopup useEffect selectedItem!=state.selectedItem');
@@ -283,47 +286,123 @@ const AutoPositionedPopup = memo(forwardRef((props, parentRef) => {
         }
     }, [selectedItem, state.selectedItem, tag]);
     useEffect(() => {
-        var _a, _b, _c;
-        console.log('AutoPositionedPopup useEffect tag=', tag);
-        console.log('AutoPositionedPopup useEffect state.isFocus=', state.isFocus);
-        console.log('AutoPositionedPopup useEffect isKeyboardFullyShown=', isKeyboardFullyShown);
-        console.log('AutoPositionedPopup useEffect ref_isFocus.current=', ref_isFocus.current);
-        console.log('AutoPositionedPopup useEffect ref_isKeyboardFullyShown.current=', ref_isKeyboardFullyShown.current);
-        console.log('AutoPositionedPopup useEffect useTextInput=', useTextInput);
-        console.log('AutoPositionedPopup useEffect TextInputProps=', TextInputProps);
-        console.log('AutoPositionedPopup useEffect hasAddedRootView.current=', hasAddedRootView.current);
-        console.log('AutoPositionedPopup useEffect hasShownRootView.current=', hasShownRootView.current);
+        var _a, _b;
+        // Detect if keyboard state has actually changed to avoid false triggers during parent component re-renders
+        const keyboardStateChanged = prevIsKeyboardFullyShownRef.current !== isKeyboardFullyShown;
+        const propsChanged = prevPropsRef.current.CustomPopView !== CustomPopView ||
+            prevPropsRef.current.CustomPopViewStyle !== CustomPopViewStyle ||
+            prevPropsRef.current.TextInputProps !== TextInputProps;
+        console.log('AutoPositionedPopup useEffect [isKeyboardFullyShown,\n' +
+            '        state.isFocus,\n' +
+            '        useTextInput,\n' +
+            '        CustomPopView,\n' +
+            '        CustomPopViewStyle,\n' +
+            '        forceRemoveAllRootViewOnItemSelected,\n' +
+            '        tag, TextInputProps,\n' +
+            '        state.selectedItem, showListEmptyComponent\n' +
+            '      ]=', {
+            tag,
+            'state.isFocus': state.isFocus,
+            isKeyboardFullyShown,
+            'ref_isFocus.current': ref_isFocus.current,
+            'ref_isKeyboardFullyShown.current': ref_isKeyboardFullyShown.current,
+            useTextInput, TextInputProps,
+            'hasAddedRootView.current': hasAddedRootView.current,
+            'hasShownRootView.current': hasShownRootView.current,
+            'keyboardStateChanged': keyboardStateChanged,
+            'propsChanged': propsChanged
+        });
+        // Update ref to record current state
+        prevIsKeyboardFullyShownRef.current = isKeyboardFullyShown;
+        prevPropsRef.current = {
+            CustomPopView,
+            CustomPopViewStyle,
+            TextInputProps
+        };
+        // Only execute logic when keyboard state actually changes or user actively operates
+        if (!keyboardStateChanged && hasAddedRootView.current) {
+            console.log('AutoPositionedPopup: Skip execution - parent component re-rendered but keyboard state unchanged textInputRef.current=', textInputRef.current);
+            // if (!ref_isFocus.current) {
+            //   textInputRef.current?.focus()
+            // }
+            return;
+        }
         if (useTextInput) {
             if (isKeyboardFullyShown && hasAddedRootView.current && !hasShownRootView.current && state.isFocus) {
-                (_a = refAutoPositionedPopup.current) === null || _a === void 0 ? void 0 : _a.measureInWindow((x, y, width, height) => {
-                    var _a;
-                    console.log('AutoPositionedPopup measureInWindow x=', x, ' y=', y, ' width=', width, ' height=', height);
-                    // SIMPLE CENTER-BASED POSITIONING STRATEGY
-                    const screenHeight = Dimensions.get('screen').height;
-                    const screenCenter = screenHeight / 2;
-                    console.log('AutoPositionedPopup screenHeight=', screenHeight, ' screenCenter=', screenCenter, ' componentY=', y);
-                    // Simple rule: if component Y > screen center, show popup above; otherwise show below
-                    if (y > screenCenter) {
-                        console.log('AutoPositionedPopup with keyboard: showing above (Y > center)');
-                        ref_listPos.current = { x: x, y: y - listLayout.height, width: width };
-                    }
-                    else {
-                        console.log('AutoPositionedPopup with keyboard: showing below (Y <= center)');
-                        ref_listPos.current = { x: x, y: y + height, width: width };
-                    }
-                    console.log('AutoPositionedPopup ref_listPos.current=', ref_listPos.current);
-                    setRootViewNativeStyle(tag, {
-                        top: (_a = ref_listPos.current) === null || _a === void 0 ? void 0 : _a.y,
-                        left: popUpViewStyle === null || popUpViewStyle === void 0 ? void 0 : popUpViewStyle.left,
-                        width: popUpViewStyle === null || popUpViewStyle === void 0 ? void 0 : popUpViewStyle.width,
-                        height: listLayout.height,
-                        opacity: 1,
+                // CRITICAL FIX FOR KEYBOARD POSITION CALCULATION
+                // Problem: When keyboard appears, the page shifts up but measureInWindow executes too early
+                // Solution: Wait for keyboard animation (300ms) + use requestAnimationFrame for next render frame
+                //
+                // Timing breakdown:
+                // 1. Keyboard animation: ~250-300ms (iOS/Android)
+                // 2. Page shift animation: ~200-300ms (KeyboardAvoidingView)
+                // 3. Layout tree update: ~50-100ms (React Native)
+                // Total: ~500-700ms needed for stable layout
+                //
+                // Strategy: setTimeout(300ms) waits for most animations to complete,
+                // then requestAnimationFrame ensures measurement happens after next render frame
+                setTimeout(() => {
+                    requestAnimationFrame(() => {
+                        var _a;
+                        (_a = refAutoPositionedPopup.current) === null || _a === void 0 ? void 0 : _a.measureInWindow((x, y, width, height) => {
+                            var _a;
+                            console.log('AutoPositionedPopup useTextInput measureInWindow (after 300ms + RAF, layout stable)=', { x, y, width, height });
+                            // CRITICAL FIX: Coordinate system mismatch issue
+                            // Problem: measureInWindow returns coordinates relative to window (fixed reference),
+                            // but popup uses absolute positioning relative to App container (which shifts when keyboard appears)
+                            //
+                            // When keyboard appears:
+                            // 1. measureInWindow returns y relative to window (e.g., y=400 after shifting)
+                            // 2. But popup's absolute positioning is relative to App container
+                            // 3. If App container shifted up by 200px, setting top=200 will display at window.y=0 (wrong!)
+                            //
+                            // Solution: Since popup is rendered at root level and uses absolute positioning,
+                            // we should directly use measureInWindow's y value without additional calculations
+                            // The popup container is at the same level as the page content
+                            const screenHeight = Dimensions.get('window').height; // Use window height, not screen
+                            console.log('AutoPositionedPopup useTextInput positioning data=', {
+                                screenHeight,
+                                componentY: y,
+                                componentHeight: height,
+                                listHeight: listLayout.height
+                            });
+                            // CORRECT POSITIONING LOGIC (as per user requirement):
+                            // 1. ALWAYS try to show popup ABOVE the input field first
+                            // 2. Only if that goes off the top of screen, show BELOW instead
+                            // 3. Don't cover/overlap the input field
+                            let popupY = y - listLayout.height; // Default: above input field
+                            // Check if showing above would go off the top of screen
+                            if (popupY < 0) {
+                                console.log('AutoPositionedPopup with keyboard: would go off screen top, showing BELOW instead');
+                                popupY = y + height; // Show below input field
+                                // Also check if showing below would go off the bottom
+                                const maxY = screenHeight - listLayout.height;
+                                if (popupY > maxY) {
+                                    // If both positions are problematic, clamp to visible area
+                                    console.log('AutoPositionedPopup with keyboard: both positions problematic, clamping to visible area');
+                                    popupY = Math.min(Math.max(0, y - listLayout.height), maxY);
+                                }
+                            }
+                            else {
+                                console.log('AutoPositionedPopup with keyboard: showing ABOVE input field (preferred position)');
+                            }
+                            ref_listPos.current = { x: x, y: popupY, width: width };
+                            console.log('AutoPositionedPopup useTextInput final position=', ref_listPos.current);
+                            setRootViewNativeStyle(tag, {
+                                top: (_a = ref_listPos.current) === null || _a === void 0 ? void 0 : _a.y,
+                                left: popUpViewStyle === null || popUpViewStyle === void 0 ? void 0 : popUpViewStyle.left,
+                                width: popUpViewStyle === null || popUpViewStyle === void 0 ? void 0 : popUpViewStyle.width,
+                                height: listLayout.height,
+                                opacity: 1,
+                            });
+                            hasShownRootView.current = true;
+                        });
                     });
-                    hasShownRootView.current = true;
-                });
+                }, 300); // 300ms is sufficient for keyboard animation, as proven by user testing (even 3000ms didn't fix wrong logic)
             }
-            else if (!isKeyboardFullyShown && ref_isFocus.current) {
-                console.log('AutoPositionedPopup isKeyboardFullyShown useEffect removeRootView tag=', tag, ' forceRemoveAllRootViewOnItemSelected=', forceRemoveAllRootViewOnItemSelected);
+            else if (!isKeyboardFullyShown && ref_isFocus.current && keyboardStateChanged) {
+                // Only execute close logic when keyboard state actually changes from true to false
+                console.log('AutoPositionedPopup isKeyboardFullyShown useEffect removeRootView (keyboard state changed)=', { tag, forceRemoveAllRootViewOnItemSelected, keyboardStateChanged });
                 removeRootView(tag, forceRemoveAllRootViewOnItemSelected);
                 setState((prevState) => {
                     return Object.assign(Object.assign({}, prevState), { isFocus: false });
@@ -335,11 +414,11 @@ const AutoPositionedPopup = memo(forwardRef((props, parentRef) => {
         }
         else {
             if (state.isFocus) {
-                (_b = refAutoPositionedPopup.current) === null || _b === void 0 ? void 0 : _b.measureInWindow((x, y, width, height) => {
-                    console.log('AutoPositionedPopup measureInWindow x=', x, ' y=', y, ' width=', width, ' height=', height);
+                (_a = refAutoPositionedPopup.current) === null || _a === void 0 ? void 0 : _a.measureInWindow((x, y, width, height) => {
+                    console.log('AutoPositionedPopup !useTextInput measureInWindow=', { x, y, width, height });
                     // INTELLIGENT POSITION CALCULATION - MODIFIED VERSION WITH STATUS BAR SAFETY
                     const calculateOptimalPosition = (componentY, componentHeight, popupHeight) => {
-                        console.log('🔥🔥🔥 NEW CALCULATE OPTIMAL POSITION FUNCTION EXECUTING 🔥🔥🔥');
+                        console.log('AutoPositionedPopup 🔥🔥🔥 NEW CALCULATE OPTIMAL POSITION FUNCTION EXECUTING 🔥🔥🔥');
                         // Use window height (visible area) instead of screen height (includes status bar)
                         const windowHeight = Dimensions.get('window').height;
                         const visibleAreaCenter = windowHeight / 2;
@@ -356,7 +435,7 @@ const AutoPositionedPopup = memo(forwardRef((props, parentRef) => {
                             }
                         };
                         const statusBarHeight = getStatusBarHeight();
-                        console.log('🔥 Cross-platform StatusBar height:', statusBarHeight, 'Platform:', Platform.OS);
+                        console.log('AutoPositionedPopup 🔥 Cross-platform StatusBar height:', statusBarHeight, 'Platform:', Platform.OS);
                         // Calculate component center point as requested
                         const componentCenterY = componentY + componentHeight / 2;
                         console.log('AutoPositionedPopup positioning data:', {
@@ -404,7 +483,7 @@ const AutoPositionedPopup = memo(forwardRef((props, parentRef) => {
                             // Strong platform adjustment - much smaller for Android bottom components
                             const platformMultiplier = Platform.OS === 'ios' ? 1.0 : (isInBottomHalf ? 0.5 : 0.9);
                             const finalSpacing = Math.max(baseSpacing, relativeSpacing) * edgeProximityFactor * platformMultiplier;
-                            console.log('🔥 Advanced spacing calculation:', {
+                            console.log('AutoPositionedPopup 🔥 Advanced spacing calculation:', {
                                 componentCenter,
                                 screenCenter,
                                 distanceFromCenter,
@@ -440,7 +519,7 @@ const AutoPositionedPopup = memo(forwardRef((props, parentRef) => {
                             // Component in bottom half + enough space above = FORCE ABOVE
                             showAbove = true;
                             finalY = componentY - popupHeight + componentHeight / 2;
-                            console.log('🔥 AutoPositionedPopup: FORCE ABOVE - bottom half component with enough space, finalY=', finalY);
+                            console.log('AutoPositionedPopup 🔥 AutoPositionedPopup: FORCE ABOVE - bottom half component with enough space, finalY=', finalY);
                         }
                         else if (!isInBottomHalf && spaceBelow >= popupHeight) {
                             // Component in top half + enough space below = show below
@@ -474,7 +553,7 @@ const AutoPositionedPopup = memo(forwardRef((props, parentRef) => {
                             }
                         }
                         // Enhanced boundary check with detailed logging
-                        console.log('🔥 Pre-boundary check:', {
+                        console.log('AutoPositionedPopup 🔥 Pre-boundary check:', {
                             originalFinalY: finalY,
                             showAbove,
                             statusBarHeight,
@@ -486,21 +565,21 @@ const AutoPositionedPopup = memo(forwardRef((props, parentRef) => {
                         if (showAbove && finalY < statusBarHeight) {
                             const oldFinalY = finalY;
                             finalY = statusBarHeight;
-                            console.log('🔥 BOUNDARY FIX: Above display adjusted for status bar:', oldFinalY, '->', finalY);
+                            console.log('AutoPositionedPopup 🔥 BOUNDARY : Above display adjusted for status bar:', oldFinalY, '->', finalY);
                         }
                         if (!showAbove && finalY + popupHeight > windowHeight) {
                             const oldFinalY = finalY;
                             finalY = windowHeight - popupHeight;
-                            console.log('🔥 BOUNDARY FIX: Below display adjusted to fit window:', oldFinalY, '->', finalY);
+                            console.log('AutoPositionedPopup 🔥 BOUNDARY : Below display adjusted to fit window:', oldFinalY, '->', finalY);
                         }
                         // CRITICAL CHECK: Detect if boundary check is changing display direction
                         if (showAbove && finalY + popupHeight > componentY) {
-                            console.log('🚨 WARNING: Above positioning may overlap with component!');
+                            console.log('AutoPositionedPopup 🚨 WARNING: Above positioning may overlap with component!');
                         }
                         if (!showAbove && finalY < componentY + componentHeight) {
-                            console.log('🚨 WARNING: Below positioning may overlap with component!');
+                            console.log('AutoPositionedPopup 🚨 WARNING: Below positioning may overlap with component!');
                         }
-                        console.log('🔥 Post-boundary check final result:', {
+                        console.log('AutoPositionedPopup 🔥 Post-boundary check final result:', {
                             finalY,
                             showAbove,
                             'popupTop': finalY,
@@ -514,17 +593,15 @@ const AutoPositionedPopup = memo(forwardRef((props, parentRef) => {
                     const actualPopupHeight = CustomPopView && CustomPopViewStyle && typeof CustomPopViewStyle.height === 'number'
                         ? CustomPopViewStyle.height
                         : listLayout.height;
-                    console.log('🔥 Using actualPopupHeight for calculation:', actualPopupHeight, 'CustomPopView:', !!CustomPopView);
+                    console.log('AutoPositionedPopup 🔥 Using actualPopupHeight for calculation:', { actualPopupHeight, CustomPopView: !!CustomPopView });
                     const positionResult = calculateOptimalPosition(y, height, actualPopupHeight);
                     console.log('AutoPositionedPopup FINAL position result:', positionResult);
                     ref_listPos.current = { x: x, y: positionResult.finalY, width: width };
-                    console.log('AutoPositionedPopup ref_listPos.current=', ref_listPos.current);
+                    console.log('AutoPositionedPopup !useTextInput ref_listPos.current=', ref_listPos.current);
                     if (CustomPopView && CustomPopViewStyle) {
-                        console.log('AutoPositionedPopup CustomPopViewStyle=', CustomPopViewStyle);
                         // Position already calculated correctly above, no need to recalculate
                         const PopViewComponent = CustomPopView();
-                        console.log('AutoPositionedPopup addRootView PopViewComponent=', PopViewComponent);
-                        console.log('AutoPositionedPopup addRootView state.selectedItem=', state.selectedItem);
+                        console.log('AutoPositionedPopup !useTextInput addRootView=', { CustomPopViewStyle, PopViewComponent, 'state.selectedItem': state.selectedItem });
                         addRootView({
                             id: tag,
                             style: !centerDisplay
@@ -546,7 +623,7 @@ const AutoPositionedPopup = memo(forwardRef((props, parentRef) => {
                         });
                     }
                     else {
-                        console.log('AutoPositionedPopup addRootView tag=', tag);
+                        console.log('AutoPositionedPopup !useTextInput addRootView tag=', tag);
                         addRootView({
                             id: tag,
                             style: {
@@ -572,7 +649,7 @@ const AutoPositionedPopup = memo(forwardRef((props, parentRef) => {
             }
         }
         if (isKeyboardFullyShown) {
-            ref_isFocus.current = (_c = state.isFocus) !== null && _c !== void 0 ? _c : false;
+            ref_isFocus.current = (_b = state.isFocus) !== null && _b !== void 0 ? _b : false;
             if (isKeyboardFullyShown !== keyboardVisibleRef.current) {
                 keyboardVisibleRef.current = isKeyboardFullyShown;
                 if (isKeyboardFullyShown && textInputRef.current) {
@@ -588,7 +665,7 @@ const AutoPositionedPopup = memo(forwardRef((props, parentRef) => {
         CustomPopView,
         CustomPopViewStyle,
         forceRemoveAllRootViewOnItemSelected,
-        tag,
+        tag, TextInputProps,
         state.selectedItem, showListEmptyComponent
     ]);
     // Imperative handle for parent component access
@@ -601,7 +678,7 @@ const AutoPositionedPopup = memo(forwardRef((props, parentRef) => {
         },
     }), []);
     const updateState = (key, value) => {
-        console.log('AutoPositionedPopup updateState key=', key, ' value=', value);
+        console.log('AutoPositionedPopup updateState=', { key, value });
         setState((prevState) => (Object.assign(Object.assign({}, prevState), { [key]: value })));
         if (key === 'selectedItem' && onItemSelected) {
             onItemSelected(value);
@@ -616,6 +693,179 @@ const AutoPositionedPopup = memo(forwardRef((props, parentRef) => {
             setSearchQuery('');
         }
     };
+    // Simple deep comparison function (for style objects only)
+    const shallowEqual = (obj1, obj2) => {
+        if (obj1 === obj2)
+            return true;
+        if (!obj1 || !obj2)
+            return false;
+        if (typeof obj1 !== 'object' || typeof obj2 !== 'object')
+            return false;
+        const keys1 = Object.keys(obj1);
+        const keys2 = Object.keys(obj2);
+        if (keys1.length !== keys2.length)
+            return false;
+        for (const key of keys1) {
+            if (obj1[key] !== obj2[key])
+                return false;
+        }
+        return true;
+    };
+    // Use useMemo to create stable props reference
+    // Only update when deep comparison detects real changes to avoid TextInput recreation due to reference changes during parent component redraws
+    const stableInputStyle = useMemo(() => {
+        if (!shallowEqual(stableInputStyleRef.current, inputStyle)) {
+            console.log(`AutoPositionedPopup inputStyle deep change detected, updating stable reference - tag: ${tag}`);
+            stableInputStyleRef.current = inputStyle;
+        }
+        return stableInputStyleRef.current;
+    }, [inputStyle, tag]);
+    const stableTextInputProps = useMemo(() => {
+        if (!shallowEqual(stableTextInputPropsRef.current, TextInputProps)) {
+            console.log(`AutoPositionedPopup TextInputProps deep change detected, updating stable reference - tag: ${tag}`);
+            stableTextInputPropsRef.current = TextInputProps;
+        }
+        return stableTextInputPropsRef.current;
+    }, [TextInputProps, tag]);
+    // Use useCallback to stabilize onFocus and onBlur callback references
+    // Prevent creating new callback functions during parent component redraws to avoid TextInput re-triggering focus
+    // Use ref to store latest state values to avoid adding frequently changing values to dependencies
+    const stateRef = useRef(state);
+    stateRef.current = state;
+    const handleTextInputFocus = useCallback(() => {
+        const currentTime = Date.now();
+        const timeSinceLastFocus = currentTime - lastFocusTimeRef.current;
+        console.log('AutoPositionedPopup onFocus=', {
+            tag,
+            'state.selectedItem': stateRef.current.selectedItem,
+            'hasTriggeredFocus.current=': hasTriggeredFocus.current,
+            'textInputRef.current=': textInputRef.current,
+            'ref_searchQuery.current=': ref_searchQuery.current,
+            'timeSinceLastFocus': timeSinceLastFocus,
+            'isKeyboardFullyShown': isKeyboardFullyShown,
+            'isFocusEventProcessing': isFocusEventProcessingRef.current
+        });
+        // Prevent rapid repeated triggers (repeated events within 300ms are ignored)
+        if (timeSinceLastFocus < 300) {
+            console.log('AutoPositionedPopup onFocus: Skip - event triggered too quickly (< 300ms)');
+            return;
+        }
+        // Skip if keyboard is already open and focus has been handled
+        if (isKeyboardFullyShown && hasTriggeredFocus.current) {
+            console.log('AutoPositionedPopup onFocus: Skip - keyboard already open and focus handled');
+            return;
+        }
+        // Prevent concurrent processing
+        if (isFocusEventProcessingRef.current) {
+            console.log('AutoPositionedPopup onFocus: Skip - processing another focus event');
+            return;
+        }
+        isFocusEventProcessingRef.current = true;
+        lastFocusTimeRef.current = currentTime;
+        if (!hasTriggeredFocus.current) {
+            hasTriggeredFocus.current = true;
+            ref_isFocus.current = true;
+            if (stateRef.current.selectedItem) {
+                ref_searchQuery.current = stateRef.current.selectedItem.title;
+            }
+            if (textInputRef.current && ref_searchQuery.current) {
+                textInputRef.current.setNativeProps({
+                    text: ref_searchQuery.current,
+                });
+            }
+        }
+        // Delay resetting processing flag to avoid blocking subsequent legitimate focus events
+        setTimeout(() => {
+            isFocusEventProcessingRef.current = false;
+        }, 100);
+    }, [tag, isKeyboardFullyShown]); // Remove state.selectedItem, use stateRef instead
+    const handleTextInputBlur = useCallback(() => {
+        console.log('AutoPositionedPopup onBlur=', {
+            tag,
+            'textInputRef.current': textInputRef.current,
+            'isKeyboardFullyShown': isKeyboardFullyShown,
+            'hasTriggeredFocus.current': hasTriggeredFocus.current
+        });
+        // If keyboard is still open, this is a false trigger caused by parent component re-render, should not reset
+        if (isKeyboardFullyShown && hasTriggeredFocus.current) {
+            console.log('AutoPositionedPopup onBlur: Skip - keyboard still open, possibly caused by parent component re-render');
+            return;
+        }
+        // Only reset internal state, do not actively close keyboard
+        // Keyboard will close naturally when TextInput loses focus, no need to manually call Keyboard.dismiss()
+        hasTriggeredFocus.current = false;
+        hasAddedRootView.current = false;
+        hasShownRootView.current = false;
+        ref_isFocus.current = false;
+        setState((prevState) => {
+            return Object.assign(Object.assign({}, prevState), { isFocus: false });
+        });
+        removeRootView(tag, forceRemoveAllRootViewOnItemSelected);
+        setSearchQuery('');
+        if (textInputRef.current) {
+            textInputRef.current.setNativeProps({ text: '' });
+            ref_searchQuery.current = '';
+            // Remove textInputRef.current.blur() - avoid forcing blur causing keyboard to close
+        }
+        // Remove Keyboard.dismiss() - let keyboard close naturally to avoid triggering keyboardDidHide event
+    }, [tag, isKeyboardFullyShown, forceRemoveAllRootViewOnItemSelected]);
+    // Wrap TextInput independently in useMemo to recreate only when key props change
+    // This avoids repeated ref callback triggers due to other props changes during parent component redraws
+    const memoizedTextInput = useMemo(() => {
+        console.log(`AutoPositionedPopup useMemo creating TextInput - tag: ${tag}, isFocus: ${state.isFocus}`);
+        if (!useTextInput || !state.isFocus) {
+            return null;
+        }
+        return (<RNTextInput ref={(ref) => {
+                // Monitor TextInput mounting and unmounting
+                if (ref && !textInputRef.current) {
+                    console.log(`AutoPositionedPopup TextInput created/mounted - tag: ${tag}, ref:`, ref);
+                }
+                else if (!ref && textInputRef.current) {
+                    console.log(`AutoPositionedPopup TextInput unmounted - tag: ${tag}`);
+                }
+                else if (ref && textInputRef.current && ref !== textInputRef.current) {
+                    console.log(`AutoPositionedPopup TextInput replaced - tag: ${tag}, oldRef:`, textInputRef.current, 'newRef:', ref);
+                }
+                textInputRef.current = ref;
+            }} key={`textinput-${tag}`} style={[
+                styles.inputStyle,
+                stableInputStyle,
+            ]} textAlign={stableTextInputProps['textAlign'] || 'left'} multiline={stableTextInputProps['multiline'] || false} numberOfLines={stableTextInputProps['numberOfLines'] || 1} onChangeText={(searchQuery) => {
+                ref_searchQuery.current = searchQuery;
+                console.log('AutoPositionedPopup onChangeText rootViews=', rootViews);
+                if (!localSearch) {
+                    if (debounceTimerRef.current) {
+                        clearTimeout(debounceTimerRef.current);
+                    }
+                    debounceTimerRef.current = setTimeout(() => {
+                        emitQueryChange(ref_searchQuery.current);
+                    }, 500);
+                }
+                else {
+                    emitQueryChange(ref_searchQuery.current);
+                }
+            }} placeholderTextColor={theme.colors.placeholderText} placeholder={placeholder} onKeyPress={(e) => {
+                if (e.nativeEvent.key === 'Enter') {
+                    Keyboard.dismiss();
+                }
+            }} keyboardType={stableTextInputProps['keyboardType'] || 'default'} clearButtonMode="while-editing" returnKeyType={stableTextInputProps['returnKeyType'] || 'done'} maxLength={stableTextInputProps['maxLength'] || 100} accessibilityLabel="selectInput" accessible={true} autoFocus={stableTextInputProps['autoFocus'] || false} autoCorrect={false} underlineColorAndroid="transparent" editable={stableTextInputProps['editable'] || true} secureTextEntry={stableTextInputProps['secureTextEntry'] || false} defaultValue="" caretHidden={false} enablesReturnKeyAutomatically onFocus={handleTextInputFocus} onBlur={handleTextInputBlur} selectTextOnFocus={stableTextInputProps['selectTextOnFocus'] || false} onSubmitEditing={(e) => {
+                console.log('AutoPositionedPopup.tsx onSubmitEditing e.nativeEvent.text=', e.nativeEvent.text);
+                onSubmitEditing && onSubmitEditing(e);
+            }}/>);
+    }, [
+        tag, // tag 是稳定的
+        useTextInput, // useTextInput 是稳定的
+        state.isFocus, // isFocus 控制显示/隐藏
+        handleTextInputFocus, // useCallback wrapped, reference stable
+        handleTextInputBlur, // useCallback wrapped, reference stable
+        stableInputStyle, // Use stable inputStyle reference (after deep comparison)
+        stableTextInputProps, // Use stable TextInputProps reference (after deep comparison)
+        placeholder, // placeholder usually stable
+        onSubmitEditing, // onSubmitEditing usually stable
+        // No longer use original inputStyle and TextInputProps, use stable references instead
+        // Stable references only update when deep comparison detects actual content changes, avoiding frequent TextInput recreation during parent component redraws
+    ]);
     // Render the component following project implementation
     return useMemo(() => {
         var _a;
@@ -623,17 +873,20 @@ const AutoPositionedPopup = memo(forwardRef((props, parentRef) => {
         return (<CustomRow>
             <View style={[styles.contain, style]} ref={refAutoPositionedPopup}>
               {!state.isFocus || !useTextInput ? (<TouchableOpacity style={[styles.AutoPositionedPopupBtn, AutoPositionedPopupBtnStyle]} disabled={AutoPositionedPopupBtnDisabled} onPress={() => {
-                    console.log('AutoPositionedPopup onPress tag=', tag);
-                    console.log('AutoPositionedPopup onPress state.isFocus=', state.isFocus);
-                    console.log('AutoPositionedPopup onPress useTextInput=', useTextInput);
-                    console.log('AutoPositionedPopup onPress hasAddedRootView.current=', hasAddedRootView.current);
-                    console.log('AutoPositionedPopup onPress hasShownRootView.current=', hasShownRootView.current);
-                    console.log('AutoPositionedPopup onPress hasTriggeredFocus.current=', hasTriggeredFocus.current);
-                    console.log('AutoPositionedPopup onPress state.selectedItem=', state.selectedItem);
+                    console.log('AutoPositionedPopup onPress=', {
+                        tag,
+                        'state.isFocus': state.isFocus,
+                        useTextInput,
+                        'hasAddedRootView.current': hasAddedRootView.current,
+                        'hasShownRootView.current': hasShownRootView.current,
+                        'hasTriggeredFocus.current': hasTriggeredFocus.current,
+                        'state.selectedItem': state.selectedItem
+                    });
                     setState((prevState) => {
                         return Object.assign(Object.assign({}, prevState), { isFocus: true });
                     });
                     if (!hasAddedRootView.current && useTextInput) {
+                        // TextInput version: hide first, show after keyboard is fully displayed
                         hasAddedRootView.current = true;
                         hasShownRootView.current = false;
                         addRootView({
@@ -649,6 +902,7 @@ const AutoPositionedPopup = memo(forwardRef((props, parentRef) => {
                             useModal: false,
                         });
                     }
+                    console.log('AutoPositionedPopup onPress done');
                 }}>
                   {!btwChildren ? (<Text style={[
                         styles.searchQueryTxt,
@@ -657,87 +911,36 @@ const AutoPositionedPopup = memo(forwardRef((props, parentRef) => {
                     ]} numberOfLines={1} ellipsizeMode={'tail'}>
                       {((_a = state.selectedItem) === null || _a === void 0 ? void 0 : _a.title) || placeholder}
                     </Text>) : (btwChildren())}
-                </TouchableOpacity>) : (useTextInput &&
-                state.isFocus && (<RNTextInput ref={textInputRef} key="fixed-textinput-key" style={[
-                    styles.inputStyle,
-                    inputStyle,
-                ]} textAlign={TextInputProps['textAlign'] || 'left'} multiline={TextInputProps['multiline'] || false} numberOfLines={TextInputProps['numberOfLines'] || 1} onChangeText={(searchQuery) => {
-                    ref_searchQuery.current = searchQuery;
-                    console.log('AutoPositionedPopup onChangeText rootViews=', rootViews);
-                    if (!localSearch) {
-                        if (debounceTimerRef.current) {
-                            clearTimeout(debounceTimerRef.current);
-                        }
-                        debounceTimerRef.current = setTimeout(() => {
-                            emitQueryChange(ref_searchQuery.current);
-                        }, 500);
-                    }
-                    else {
-                        emitQueryChange(ref_searchQuery.current);
-                    }
-                }} placeholderTextColor={theme.colors.placeholderText} placeholder={placeholder} onKeyPress={(e) => {
-                    if (e.nativeEvent.key === 'Enter') {
-                        Keyboard.dismiss();
-                    }
-                }} keyboardType={TextInputProps['keyboardType'] || 'default'} clearButtonMode="while-editing" returnKeyType={TextInputProps['returnKeyType'] || 'done'} maxLength={TextInputProps['maxLength'] || 100} accessibilityLabel="selectInput" accessible={true} autoFocus={TextInputProps['autoFocus'] || false} autoCorrect={false} underlineColorAndroid="transparent" editable={TextInputProps['editable'] || true} secureTextEntry={TextInputProps['secureTextEntry'] || false} defaultValue="" caretHidden={false} enablesReturnKeyAutomatically onFocus={() => {
-                    console.log('AutoPositionedPopup onFocus tag=', tag, ' selectedItem=', state.selectedItem, ' hasTriggeredFocus.current=', hasTriggeredFocus.current, ' textInputRef.current=', textInputRef.current, ' ref_searchQuery.current=', ref_searchQuery.current);
-                    if (!hasTriggeredFocus.current) {
-                        hasTriggeredFocus.current = true;
-                        ref_isFocus.current = true;
-                        if (state.selectedItem) {
-                            ref_searchQuery.current = state.selectedItem.title;
-                        }
-                        if (textInputRef.current && ref_searchQuery.current) {
-                            textInputRef.current.setNativeProps({
-                                text: ref_searchQuery.current,
-                            });
-                        }
-                    }
-                }} onBlur={() => {
-                    console.log('AutoPositionedPopup onBlur tag=', tag, 'textInputRef.current=', textInputRef.current);
-                    hasTriggeredFocus.current = false;
-                    hasAddedRootView.current = false; // 重置 RootView 狀態
-                    hasShownRootView.current = false;
-                    ref_isFocus.current = false;
-                    setState((prevState) => {
-                        return Object.assign(Object.assign({}, prevState), { isFocus: false });
-                    });
-                    removeRootView(tag, forceRemoveAllRootViewOnItemSelected);
-                    setSearchQuery('');
-                    if (textInputRef.current) {
-                        textInputRef.current.setNativeProps({ text: '' });
-                        ref_searchQuery.current = '';
-                        textInputRef.current.blur();
-                    }
-                    Keyboard.dismiss();
-                }} selectTextOnFocus={TextInputProps['selectTextOnFocus'] || false} onSubmitEditing={(e) => {
-                    console.log('AutoPositionedPopup.tsx onSubmitEditing e.nativeEvent.text=', e.nativeEvent.text);
-                    onSubmitEditing && onSubmitEditing(e);
-                }}/>))}
+                </TouchableOpacity>) : (memoizedTextInput)}
             </View>
           </CustomRow>);
-    }, [tag,
-        fetchData,
-        renderItem,
-        onItemSelected,
-        onSubmitEditing,
+    }, [
+        tag,
+        // ✅ CRITICAL FIX: Remove all props that may change frequently or are inline functions
+        // Changes to these props should not cause the entire component tree to recreate, especially TextInput
+        // fetchData,  // ❌ Removed: inline function
+        // renderItem,  // ❌ Removed: possibly inline function
+        // onItemSelected,  // ❌ Removed: possibly inline function
+        // onSubmitEditing,  // ❌ Removed: possibly inline function
         localSearch,
-        placeholder,
-        textAlign,
+        // placeholder,  // ❌ Removed: may change
+        // textAlign,  // ❌ Removed: may change
         pageSize,
         selectedItem,
-        CustomRow,
+        // CustomRow,  // ❌ Removed: inline function, new reference each time
         useTextInput,
-        btwChildren,
-        selectedItem,
-        keyExtractor,
-        AutoPositionedPopupBtnStyle,
-        CustomPopView,
-        CustomPopViewStyle,
+        // btwChildren,  // ❌ Removed: inline function
+        // keyExtractor,  // ❌ Removed: possibly inline function
+        // AutoPositionedPopupBtnStyle,  // ❌ Removed: possibly inline object
+        // CustomPopView,  // ❌ Removed: may change
+        // CustomPopViewStyle,  // ❌ Removed: may change
         forceRemoveAllRootViewOnItemSelected,
-        inputStyle,
-        TextInputProps,
-        state.isFocus, showListEmptyComponent, emptyText]);
+        state.isFocus,
+        showListEmptyComponent,
+        emptyText,
+        // ✅ Removed most dependencies that may cause re-rendering, keeping only core dependencies that truly affect component structure
+        // This prevents TextInput recreation due to inline functions/objects during parent component redraws
+    ]);
 }));
 export default AutoPositionedPopup;
 //# sourceMappingURL=AutoPositionedPopup.js.map