react-native-auto-positioned-popup 1.2.16 → 1.2.18

package/lib/AutoPositionedPopup.js

@@ -1,4 +1,24 @@
 import { debugLog } from './constants';
+// Module load marker - unique ID for tracking code version
+// V19f (2025-01-04): CORRECT direction for coordinate adjustment - ADD statusBarHeight to move popup DOWN
+// Wait 1 second for KeyboardAwareScrollView to stabilize, then use measureInWindow to get trigger's FINAL position
+// NOTE: Parent component (KeyboardAwareScrollView) is responsible for scrolling trigger into view
+// DEBUG FLAG: Set to false to disable all console logs for better performance
+const POPUP_DEBUG = false; // DISABLED: Too many logs cause app freeze
+const POPUP_POSITION_DEBUG = true; // Only log positioning calculations
+const debugLog = (...args) => {
+    if (POPUP_DEBUG) {
+        debugLog(...args);
+    }
+};
+// Separate logging function for position-related logs only
+const positionDebugLog = (...args) => {
+    if (POPUP_POSITION_DEBUG) {
+        debugLog(...args);
+    }
+};
+// Only log module load in debug mode
+positionDebugLog('POPUP_MODULE_V19f_LOADED at ' + new Date().toISOString() + ' (Parent handles scroll)');
 import React, { forwardRef, memo, useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState, } from 'react';
 import { Dimensions, findNodeHandle, Keyboard, Platform, StatusBar, Text, TextInput as RNTextInput, TouchableOpacity, View, } from 'react-native';
 import { AdvancedFlatList } from 'react-native-advanced-flatlist';
@@ -131,7 +151,7 @@ const AutoPositionedPopupList = memo(({ tag, updateState, fetchData, keyExtracto
             return null;
         }
         catch (e) {
-            console.warn('Error in fetchData:', e);
+            debugLog('Error in fetchData:', e);
         }
         debugLog('AutoPositionedPopupList _fetchData res=', null);
         return null;
@@ -180,7 +200,7 @@ const AutoPositionedPopup = memo(forwardRef((props, parentRef) => {
             // res.needLoadMore = res1.length === pageSize
         }
         catch (e) {
-            console.warn('Error in fetch operation:', e);
+            debugLog('Error in fetch operation:', e);
         }
         return res;
     }, renderItem, onItemSelected, localSearch = false, pageSize = 20, selectedItem, useTextInput = false, btwChildren, CustomRow = ({ children }) => <View>{children}</View>, keyExtractor = (item) => String((item === null || item === void 0 ? void 0 : item.id) || ''), AutoPositionedPopupBtnDisabled = false, forceRemoveAllRootViewOnItemSelected = false, centerDisplay = false, selectedItemBackgroundColor = 'rgba(116, 116, 128, 0.08)', 
@@ -192,7 +212,7 @@ const AutoPositionedPopup = memo(forwardRef((props, parentRef) => {
         selectedItem: selectedItem,
     });
     // Use RootView context
-    const { addRootView, setRootViewNativeStyle, removeRootView, rootViews, setSearchQuery } = useRootView();
+    const { addRootView, setRootViewNativeStyle, updateRootView, removeRootView, rootViews, setSearchQuery } = useRootView();
     const rootViewsRef = useRef(rootViews);
     // Track TextInput focus and RootView states like project implementation
     const hasTriggeredFocus = useRef(false);
@@ -206,6 +226,8 @@ const AutoPositionedPopup = memo(forwardRef((props, parentRef) => {
     const ref_searchQuery = useRef('');
     // Store trigger button position when clicked (before it's replaced by TextInput)
     const triggerPositionRef = useRef(null);
+    // V19: Track keyboard height for accurate popup positioning
+    const keyboardHeightRef = useRef(0);
     // Add ref to track previous keyboard state to avoid false triggers during parent component re-renders
     const prevIsKeyboardFullyShownRef = useRef(false);
     const prevPropsRef = useRef({});
@@ -232,11 +254,16 @@ const AutoPositionedPopup = memo(forwardRef((props, parentRef) => {
     const searchQueryRef = useRef(''); // Use ref instead of state to avoid re-renders
     // Refs to store latest values for useEffect without adding to dependency array
     const dataRef = useRef(data);
-    const isKeyboardFullyShown = useKeyboardStatus();
+    // V19: useKeyboardStatus now returns { isShown, height } for accurate positioning
+    const keyboardStatus = useKeyboardStatus();
+    const isKeyboardFullyShown = keyboardStatus.isShown;
     const ref_isKeyboardFullyShown = useRef(isKeyboardFullyShown);
     useEffect(() => {
         ref_isKeyboardFullyShown.current = isKeyboardFullyShown;
-    }, [isKeyboardFullyShown]);
+        // V19: Store keyboard height for popup positioning calculations
+        keyboardHeightRef.current = keyboardStatus.height;
+        positionDebugLog(`KEYBOARD_HEIGHT_UPDATE: height=${keyboardStatus.height} isShown=${isKeyboardFullyShown}`);
+    }, [keyboardStatus.isShown, keyboardStatus.height]);
     const theme = defaultTheme;
     /**
      * Scrolls the parent KeyboardAwareScrollView to make the trigger button visible
@@ -405,7 +432,6 @@ const AutoPositionedPopup = memo(forwardRef((props, parentRef) => {
         }
     }, [selectedItem, state.selectedItem, tag]);
     useEffect(() => {
-        var _a;
         // 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 ||
@@ -442,13 +468,18 @@ const AutoPositionedPopup = memo(forwardRef((props, parentRef) => {
             TextInputProps
         };
         // Only execute logic when keyboard state actually changes or user actively operates
-        if (!keyboardStateChanged && hasAddedRootView.current) {
-            debugLog('AutoPositionedPopup: Skip execution - parent component re-rendered but keyboard state unchanged textInputRef.current=', textInputRef.current);
-            // if (!ref_isFocus.current) {
-            //   textInputRef.current?.focus()
-            // }
+        // CRITICAL FIX: Also allow execution when popup needs initial positioning
+        // hasAddedRootView.current = true means popup container exists
+        // hasShownRootView.current = false means positioning not done yet
+        // We MUST allow execution when popup needs positioning, even if keyboard state unchanged
+        if (!keyboardStateChanged && hasAddedRootView.current && hasShownRootView.current) {
+            debugLog('AutoPositionedPopup: Skip execution - already positioned and keyboard state unchanged');
             return;
         }
+        // Log when we're allowing execution for initial positioning
+        if (!keyboardStateChanged && hasAddedRootView.current && !hasShownRootView.current) {
+            debugLog('AutoPositionedPopup: ALLOWING execution for initial positioning (popup added but not positioned yet)');
+        }
         const getStatusBarHeight = () => {
             if (Platform.OS === 'android') {
                 // Android: Use StatusBar.currentHeight API
@@ -465,125 +496,144 @@ const AutoPositionedPopup = memo(forwardRef((props, parentRef) => {
         const statusBarHeight = getStatusBarHeight();
         if (useTextInput) {
             if (isKeyboardFullyShown && hasAddedRootView.current && !hasShownRootView.current && state.isFocus) {
-                // KEYBOARD AVOIDANCE FIX: Scroll parent ScrollView to keep trigger visible
-                // When keyboard appears, the trigger button may be covered. If parentScrollViewRef
-                // is provided, scroll the parent to keep the trigger visible above the keyboard.
-                if (parentScrollViewRef === null || parentScrollViewRef === void 0 ? void 0 : parentScrollViewRef.current) {
-                    debugLog('AutoPositionedPopup: Keyboard appeared, scrolling parent to keep trigger visible');
-                    // Use a slight delay to ensure keyboard animation has started
-                    setTimeout(() => {
-                        scrollToTriggerWithMeasure();
-                    }, 100);
+                // KEYBOARD AVOIDANCE FIX: Use KeyboardAwareScrollView's native scrollToFocusedInput method
+                // This properly scrolls to the dynamically created TextInput without causing double scrolling.
+                // The previous custom scrollToTriggerWithMeasure() caused over-scrolling issues.
+                if ((parentScrollViewRef === null || parentScrollViewRef === void 0 ? void 0 : parentScrollViewRef.current) && textInputRef.current) {
+                    debugLog('AutoPositionedPopup: Keyboard appeared, using scrollToFocusedInput to scroll parent');
+                    // Use KeyboardAwareScrollView's native method to scroll to the focused TextInput
+                    // This is more reliable than custom scroll calculations
+                    const scrollView = parentScrollViewRef.current;
+                    if (typeof scrollView.scrollToFocusedInput === 'function') {
+                        // findNodeHandle is needed to get the native node reference
+                        const nodeHandle = findNodeHandle(textInputRef.current);
+                        if (nodeHandle) {
+                            // scrollToFocusedInput expects a ReactNode, use the TextInput ref
+                            scrollView.scrollToFocusedInput(textInputRef.current, scrollExtraHeight);
+                            debugLog('AutoPositionedPopup: Called scrollToFocusedInput with extraHeight=', scrollExtraHeight);
+                        }
+                    }
+                    else {
+                        debugLog('AutoPositionedPopup: scrollToFocusedInput not available, skipping scroll');
+                    }
                 }
                 // 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
+                // Solution: Wait for keyboard animation + page scroll to complete before measuring
                 //
                 // 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
+                // 2. Page shift animation: ~300-500ms (KeyboardAwareScrollView)
+                // 3. Layout tree update: ~100-200ms (React Native)
+                // Total: ~700-1000ms needed for stable layout
+                //
+                // USER REQUEST (2025-01-04): Wait 1 second (1000ms) after keyboard appears
+                // to ensure trigger component position has fully stabilized after scroll
                 //
-                // Strategy: setTimeout(300ms) waits for most animations to complete,
+                // Strategy: setTimeout(1000ms) waits for all animations to complete,
                 // then requestAnimationFrame ensures measurement happens after next render frame
+                const KEYBOARD_STABILIZATION_DELAY = 500; // 500ms as requested by user
+                positionDebugLog(`POPUP_WAIT: Waiting ${KEYBOARD_STABILIZATION_DELAY}ms for keyboard/scroll stabilization, tag=${tag}`);
                 setTimeout(() => {
+                    positionDebugLog(`POPUP_MEASURE_START: ${KEYBOARD_STABILIZATION_DELAY}ms elapsed, now measuring position for tag=${tag}`);
                     requestAnimationFrame(() => {
-                        // CRITICAL FIX: Use triggerBtnRef (the actual TouchableOpacity) for measurement
-                        // instead of refAutoPositionedPopup (the outer View with flex:1/height:100%)
-                        const measureTarget = triggerBtnRef.current || refAutoPositionedPopup.current;
-                        measureTarget === null || measureTarget === void 0 ? void 0 : measureTarget.measureInWindow((x, y, width, height) => {
-                            var _a;
-                            debugLog('AutoPositionedPopup useTextInput measureInWindow (after 300ms + RAF, layout stable)=', { x, y, width, height, usingTriggerRef: !!triggerBtnRef.current });
-                            // CRITICAL FIX: Handle undefined values from measureInWindow
-                            // This can happen during navigation transitions or when view is not yet mounted
-                            if (x === undefined || y === undefined || width === undefined || height === undefined) {
-                                console.warn('AutoPositionedPopup useTextInput: measureInWindow returned undefined values, using fallback position');
-                                const screenHeightFallback = Dimensions.get('window').height;
-                                const screenWidthFallback = Dimensions.get('window').width;
-                                const fallbackY = (screenHeightFallback - listLayout.height) / 2;
-                                const fallbackX = screenWidthFallback * 0.05;
-                                const fallbackWidth = screenWidthFallback * 0.9;
-                                x = fallbackX;
-                                y = fallbackY;
-                                width = fallbackWidth;
-                                height = 50;
-                            }
-                            // 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
-                            debugLog('AutoPositionedPopup useTextInput positioning data=', {
-                                screenHeight,
-                                componentY: y,
-                                componentHeight: height,
-                                listHeight: listLayout.height
+                        // CRITICAL FIX: Measure CURRENT position AFTER keyboard animation completes
+                        // DO NOT use stored triggerPositionRef because keyboard may have shifted the view up
+                        // Instead, measure the outer wrapper (refAutoPositionedPopup)
+                        // which reflects the ACTUAL current position after keyboard shift
+                        var _a;
+                        // DEBUG: Log both refs to compare their positions
+                        positionDebugLog(`POPUP_REFS: textInputRef=${!!textInputRef.current} refAutoPositionedPopup=${!!refAutoPositionedPopup.current}`);
+                        // Measure BOTH refs for comparison
+                        if (textInputRef.current && refAutoPositionedPopup.current) {
+                            textInputRef.current.measureInWindow((tx, ty, tw, th) => {
+                                debugLog('AutoPositionedPopup DEBUG: textInputRef position=', { x: tx, y: ty, width: tw, height: th });
+                            });
+                            refAutoPositionedPopup.current.measureInWindow((rx, ry, rw, rh) => {
+                                debugLog('AutoPositionedPopup DEBUG: refAutoPositionedPopup position=', { x: rx, y: ry, width: rw, height: rh });
                             });
-                            // FIXED POSITIONING LOGIC (with keyboard):
-                            // measureInWindow returns coordinates relative to the window (screen)
-                            // The popup uses position: 'absolute' relative to RootViewProvider
-                            // So we should NOT add statusBarHeight to the position calculation
-                            //
-                            // 1. Default: show popup ABOVE the input field
-                            // Position popup so that the trigger remains VISIBLE below the popup
-                            // Use (y + height * 0.7) as reference to compensate for measurement offset
-                            // while still leaving trigger visible (30% of trigger height exposed)
-                            let popupY = y + (height * 0.7) - listLayout.height;
-                            debugLog('AutoPositionedPopup with keyboard: initial calculation for ABOVE position:', {
-                                componentY: y,
-                                componentHeight: height,
-                                popupHeight: listLayout.height,
-                                popupY,
-                                popupBottom: popupY + listLayout.height,
-                                triggerTop: y,
-                                statusBarHeight
+                        }
+                        // CRITICAL FIX: Use textInputRef as primary measurement target
+                        // refAutoPositionedPopup.measureInWindow() returns undefined values
+                        // because the outer wrapper View uses flex:1/height:100% which makes it unmeasurable
+                        // textInputRef reliably returns the actual position of the input field
+                        const measureTarget = textInputRef.current || refAutoPositionedPopup.current;
+                        if (!measureTarget) {
+                            debugLog('AutoPositionedPopup useTextInput: no measureTarget available, using fallback');
+                            const screenHeightFallback = Dimensions.get('window').height;
+                            const screenWidthFallback = Dimensions.get('window').width;
+                            const fallbackY = (screenHeightFallback - listLayout.height) / 2;
+                            ref_listPos.current = { x: screenWidthFallback * 0.05, y: fallbackY, width: screenWidthFallback * 0.9 };
+                            updateRootView(tag, {
+                                style: {
+                                    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,
+                                }
                             });
-                            // 2. Check if showing above would go behind status bar
-                            if (popupY < statusBarHeight) {
-                                debugLog('AutoPositionedPopup with keyboard: would go behind status bar, showing BELOW instead');
-                                // Show BELOW the input field
-                                // Since y + height represents the trigger's "reference bottom" (accounting for measurement offset),
-                                // we need to add another height to position popup BELOW the actual trigger
-                                popupY = y + height + height;
-                                debugLog('AutoPositionedPopup with keyboard: BELOW position calculated:', {
-                                    formula: 'y + 2*height',
-                                    y,
-                                    height,
-                                    popupY
+                            hasShownRootView.current = true;
+                            return;
+                        }
+                        // Determine which ref is actually being used (for logging)
+                        const usingTextInputRef = measureTarget === textInputRef.current;
+                        debugLog('AutoPositionedPopup useTextInput: using measureTarget=', usingTextInputRef ? 'textInputRef' : 'refAutoPositionedPopup');
+                        // V19f: Position popup above trigger
+                        // Parent KeyboardAwareScrollView is responsible for scrolling trigger into view
+                        // This component only handles popup positioning relative to trigger's FINAL position
+                        const screenHeight = Dimensions.get('window').height;
+                        const screenWidth = Dimensions.get('window').width;
+                        const currentKeyboardHeight = keyboardHeightRef.current;
+                        const popupHeight = listLayout.height; // 200px
+                        positionDebugLog(`V19f_SCREEN: height=${screenHeight} width=${screenWidth} keyboardH=${currentKeyboardHeight} statusBarH=${statusBarHeight}`);
+                        measureTarget.measureInWindow((x, y, width, height) => {
+                            positionDebugLog(`V19f_MEASURE: triggerX=${x} triggerY=${y} triggerW=${width} triggerH=${height}`);
+                            // Handle undefined values
+                            if (x === undefined || y === undefined || width === undefined || height === undefined) {
+                                positionDebugLog('V19f: undefined values, using center fallback');
+                                const fallbackY = (screenHeight - currentKeyboardHeight - popupHeight) / 2;
+                                updateRootView(tag, {
+                                    style: { top: fallbackY, left: popUpViewStyle === null || popUpViewStyle === void 0 ? void 0 : popUpViewStyle.left, width: popUpViewStyle === null || popUpViewStyle === void 0 ? void 0 : popUpViewStyle.width, height: popupHeight, opacity: 1 }
                                 });
-                                // 3. Also check if showing below would go off the bottom
-                                const maxY = screenHeight - listLayout.height;
+                                hasShownRootView.current = true;
+                                return;
+                            }
+                            const triggerTop = y;
+                            const triggerHeight = height;
+                            const triggerBottom = y + height;
+                            const keyboardTop = screenHeight - currentKeyboardHeight;
+                            positionDebugLog(`V19f_ANALYSIS: triggerTop=${triggerTop} triggerBottom=${triggerBottom} keyboardTop=${keyboardTop}`);
+                            // V19f: Position popup DIRECTLY above trigger
+                            // ADD statusBarHeight to close the gap (coordinates adjustment)
+                            let popupY = triggerTop - popupHeight + statusBarHeight;
+                            let position = 'ABOVE';
+                            positionDebugLog(`V19f_CALC: base=${triggerTop - popupHeight} + statusBarH=${statusBarHeight} = popupY=${popupY}`);
+                            // Safety check: ensure popup doesn't go above screen top
+                            if (popupY < 0) {
+                                // If popup would go off screen top, position it BELOW trigger instead
+                                popupY = triggerBottom + statusBarHeight;
+                                position = 'BELOW';
+                                // Clamp to stay above keyboard
+                                const maxY = keyboardTop - popupHeight;
                                 if (popupY > maxY) {
-                                    // If both positions are problematic, clamp to visible area
-                                    debugLog('AutoPositionedPopup with keyboard: both positions problematic, clamping to visible area');
-                                    popupY = Math.min(Math.max(statusBarHeight, y - listLayout.height), maxY);
+                                    popupY = maxY;
                                 }
+                                positionDebugLog(`V19f_BELOW: popupY=${popupY} (clamped to stay above keyboard)`);
                             }
-                            else {
-                                debugLog('AutoPositionedPopup with keyboard: showing ABOVE input field (preferred position)');
-                            }
-                            ref_listPos.current = { x: x, y: popupY, width: width };
-                            debugLog('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,
+                            // V19f: Verification
+                            const popupBottom = popupY + popupHeight;
+                            const gapPixels = triggerTop - popupBottom;
+                            positionDebugLog(`V19f_RESULT: position=${position} popupY=${popupY} popupBottom=${popupBottom}`);
+                            positionDebugLog(`V19f_GAP: trigger_top=${triggerTop} - popup_bottom=${popupBottom} = gap=${gapPixels}px`);
+                            ref_listPos.current = { x, y: popupY, width };
+                            updateRootView(tag, {
+                                style: { top: popupY, 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;
                         });
                     });
-                }, 300); // 300ms is sufficient for keyboard animation, as proven by user testing (even 3000ms didn't fix wrong logic)
+                }, KEYBOARD_STABILIZATION_DELAY); // 1000ms to wait for keyboard + scroll stabilization (user request 2025-01-04)
             }
             else if (!isKeyboardFullyShown && ref_isFocus.current && keyboardStateChanged) {
                 // Only execute close logic when keyboard state actually changes from true to false
@@ -598,173 +648,52 @@ const AutoPositionedPopup = memo(forwardRef((props, parentRef) => {
             }
         }
         else {
+            // V17 SIMPLIFICATION: When useTextInput=false, ALWAYS show popup in CENTER of screen
+            // User request: "只要传入的 useTextInput 是 false, 弹框都显示在屏幕中间"
+            // This avoids all complex positioning calculations that kept failing
             if (state.isFocus) {
                 if (isKeyboardFullyShown) {
                     Keyboard.dismiss();
                     return;
                 }
-                // CRITICAL FIX: Use triggerBtnRef (the actual TouchableOpacity) for measurement
-                // instead of refAutoPositionedPopup (the outer View with flex:1/height:100%)
-                // This ensures accurate position when component is inside complex layouts like KeyboardAwareScrollView
-                const measureTarget = triggerBtnRef.current || refAutoPositionedPopup.current;
-                measureTarget === null || measureTarget === void 0 ? void 0 : measureTarget.measureInWindow((x, y, width, height) => {
-                    debugLog('AutoPositionedPopup !useTextInput measureInWindow=', { x, y, width, height, usingTriggerRef: !!triggerBtnRef.current });
-                    // CRITICAL FIX: Handle undefined values from measureInWindow
-                    // This can happen during navigation transitions or when view is not yet mounted
-                    if (x === undefined || y === undefined || width === undefined || height === undefined) {
-                        console.warn('AutoPositionedPopup: measureInWindow returned undefined values, using fallback position');
-                        // Use screen center as fallback position
-                        const screenHeight = Dimensions.get('window').height;
-                        const screenWidth = Dimensions.get('window').width;
-                        const fallbackY = (screenHeight - listLayout.height) / 2;
-                        const fallbackX = screenWidth * 0.05; // 5% from left
-                        const fallbackWidth = screenWidth * 0.9; // 90% width
-                        ref_listPos.current = { x: fallbackX, y: fallbackY, width: fallbackWidth };
-                        debugLog('AutoPositionedPopup !useTextInput using fallback position=', ref_listPos.current);
-                        // Proceed with fallback values
-                        x = fallbackX;
-                        y = fallbackY;
-                        width = fallbackWidth;
-                        height = 50; // Default height for the trigger element
-                    }
-                    // CORRECT POSITIONING LOGIC (as per user requirement)
-                    // Default: show popup ABOVE the input field
-                    // Only if that goes off the top of screen (considering status bar), show BELOW instead
-                    const calculateOptimalPosition = (componentY, componentHeight, popupHeight) => {
-                        debugLog('AutoPositionedPopup calculateOptimalPosition executing');
-                        // Use window height (visible area) instead of screen height
-                        const screenHeight = Dimensions.get('window').height;
-                        debugLog('AutoPositionedPopup positioning data:', {
-                            screenHeight,
-                            componentY,
-                            componentHeight,
-                            popupHeight,
-                            statusBarHeight,
-                            platform: Platform.OS
-                        });
-                        // FIXED POSITIONING LOGIC:
-                        // The popup uses position: 'absolute' relative to the RootViewProvider container
-                        // measureInWindow returns coordinates relative to the window (screen)
-                        // So we should NOT add statusBarHeight to the position calculation
-                        //
-                        // 1. Default: show popup ABOVE the trigger element
-                        // FIX: Use (componentY + componentHeight) as the trigger's bottom edge reference point
-                        // This compensates for measurement inaccuracies when trigger is inside complex layouts (FlatList, ScrollView)
-                        // The popup's bottom should be at the trigger's top with minimal gap (≤5px)
-                        // Formula: popup_top = trigger_bottom - componentHeight - popupHeight
-                        //          popup_bottom = trigger_bottom - componentHeight = trigger_top
-                        let popupY = componentY + componentHeight - popupHeight;
-                        debugLog('AutoPositionedPopup: initial calculation for ABOVE position:', {
-                            componentY,
-                            componentHeight,
-                            popupHeight,
-                            popupY,
-                            triggerBottom: componentY + componentHeight,
-                            statusBarHeight
-                        });
-                        // 2. Check if showing above would go off the top of screen (behind status bar)
-                        if (popupY < statusBarHeight) {
-                            debugLog('AutoPositionedPopup: would go behind status bar, showing BELOW instead');
-                            // Show BELOW the trigger element
-                            // Since componentY + componentHeight represents the trigger's "reference bottom" (accounting for measurement offset),
-                            // we need to add another componentHeight to position popup BELOW the actual trigger
-                            // Formula: popup top = componentY + (2 * componentHeight)
-                            //   - (componentY + componentHeight) = trigger's actual top (compensated)
-                            //   - + componentHeight = skip past trigger height to get to trigger's actual bottom
-                            popupY = componentY + componentHeight + componentHeight;
-                            debugLog('AutoPositionedPopup: BELOW position calculated:', {
-                                formula: 'componentY + 2*componentHeight',
-                                componentY,
-                                componentHeight,
-                                popupY
-                            });
-                            // 3. Also check if showing below would go off the bottom of screen
-                            const maxY = screenHeight - popupHeight;
-                            if (popupY > maxY) {
-                                // If both positions are problematic, clamp to visible area
-                                // Prioritize showing as close to trigger as possible
-                                debugLog('AutoPositionedPopup: both positions problematic, clamping to visible area');
-                                popupY = Math.min(Math.max(statusBarHeight, componentY - popupHeight), maxY);
-                            }
-                        }
-                        else {
-                            debugLog('AutoPositionedPopup: showing ABOVE input field (preferred position)');
-                        }
-                        debugLog('AutoPositionedPopup final position:', {
-                            popupY,
-                            'showing above': popupY < componentY,
-                            'below status bar': popupY >= statusBarHeight
-                        });
-                        return { finalY: popupY, showAbove: popupY < componentY };
-                    };
-                    // Calculate position ONCE based on actual popup height
-                    const actualPopupHeight = CustomPopView && CustomPopViewStyle && typeof CustomPopViewStyle.height === 'number'
-                        ? CustomPopViewStyle.height
-                        : listLayout.height;
-                    debugLog('AutoPositionedPopup 🔥 Using actualPopupHeight for calculation:', { actualPopupHeight, CustomPopView: !!CustomPopView });
-                    const positionResult = calculateOptimalPosition(y, height, actualPopupHeight);
-                    debugLog('AutoPositionedPopup FINAL position result:', positionResult);
-                    ref_listPos.current = { x: x, y: positionResult.finalY, width: width };
-                    debugLog('AutoPositionedPopup !useTextInput ref_listPos.current=', ref_listPos.current);
-                    if (CustomPopView && CustomPopViewStyle) {
-                        // Position already calculated correctly above, no need to recalculate
-                        const PopViewComponent = CustomPopView();
-                        debugLog('AutoPositionedPopup !useTextInput addRootView=', { CustomPopViewStyle, PopViewComponent, 'state.selectedItem': state.selectedItem });
-                        addRootView({
-                            id: tag,
-                            style: !centerDisplay
-                                ? Object.assign({ top: ref_listPos.current.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 }, CustomPopViewStyle) : Object.assign({ width: popUpViewStyle === null || popUpViewStyle === void 0 ? void 0 : popUpViewStyle.width, height: listLayout.height }, CustomPopViewStyle),
-                            component: <PopViewComponent selectedItem={state.selectedItem}></PopViewComponent>,
-                            useModal: true,
-                            onModalClose: () => {
-                                debugLog('AutoPositionedPopup onModalClose');
-                                removeRootView(tag, forceRemoveAllRootViewOnItemSelected, rootViewsRef.current);
-                                setState((prevState) => {
-                                    return Object.assign(Object.assign({}, prevState), { isFocus: false });
-                                });
-                                hasAddedRootView.current = false;
-                                hasShownRootView.current = false;
-                                hasTriggeredFocus.current = false;
-                                setSearchQuery('');
-                            },
-                            centerDisplay,
-                        });
-                    }
-                    else {
-                        debugLog('AutoPositionedPopup !useTextInput addRootView tag=', tag);
-                        addRootView({
-                            id: tag,
-                            style: {
-                                top: ref_listPos.current.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,
-                            },
-                            component: (<AutoPositionedPopupList tag={tag} updateState={updateState} fetchData={fetchData} pageSize={pageSize} renderItem={renderItem} selectedItem={state.selectedItem} localSearch={localSearch} showListEmptyComponent={showListEmptyComponent} emptyText={emptyText} themeMode={themeMode}/>),
-                            useModal: true,
-                            onModalClose: () => {
-                                debugLog('AutoPositionedPopup onModalClose tag=', tag);
-                                removeRootView(tag, forceRemoveAllRootViewOnItemSelected, rootViewsRef.current);
-                                setState((prevState) => {
-                                    return Object.assign({}, prevState);
-                                });
-                                setSearchQuery('');
-                            },
-                        });
-                    }
-                });
-            }
-        }
-        if (isKeyboardFullyShown) {
-            ref_isFocus.current = (_a = state.isFocus) !== null && _a !== void 0 ? _a : false;
-            if (isKeyboardFullyShown !== keyboardVisibleRef.current) {
-                keyboardVisibleRef.current = isKeyboardFullyShown;
-                if (isKeyboardFullyShown && textInputRef.current) {
-                    if (ref_searchQuery.current) {
-                        textInputRef.current.setNativeProps({ text: ref_searchQuery.current });
-                    }
+                debugLog('🟢🟢🟢 POPUP_V17 useTextInput=false, showing popup in CENTER of screen');
+                const actualPopupHeight = CustomPopView && CustomPopViewStyle && typeof CustomPopViewStyle.height === 'number'
+                    ? CustomPopViewStyle.height
+                    : listLayout.height;
+                if (CustomPopView && CustomPopViewStyle) {
+                    const PopViewComponent = CustomPopView();
+                    debugLog('🔵🔵🔵 POPUP_V17 CustomPopView centerDisplay=true');
+                    addRootView({
+                        id: tag,
+                        style: Object.assign({ width: popUpViewStyle === null || popUpViewStyle === void 0 ? void 0 : popUpViewStyle.width }, CustomPopViewStyle),
+                        component: <PopViewComponent selectedItem={state.selectedItem}></PopViewComponent>,
+                        useModal: true,
+                        centerDisplay: true, // V17: Force center display for useTextInput=false
+                        onModalClose: () => {
+                            debugLog('AutoPositionedPopup V17 onModalClose tag=', tag);
+                            removeRootView(tag, forceRemoveAllRootViewOnItemSelected, rootViewsRef.current);
+                            setState((prevState) => (Object.assign({}, prevState)));
+                            setSearchQuery('');
+                        },
+                    });
+                }
+                else {
+                    debugLog('🔵🔵🔵 POPUP_V17 List centerDisplay=true, height=', listLayout.height);
+                    addRootView({
+                        id: tag,
+                        style: { width: popUpViewStyle === null || popUpViewStyle === void 0 ? void 0 : popUpViewStyle.width, height: listLayout.height, opacity: 1 },
+                        component: (<AutoPositionedPopupList tag={tag} updateState={updateState} fetchData={fetchData} pageSize={pageSize} renderItem={renderItem} selectedItem={state.selectedItem} localSearch={localSearch} showListEmptyComponent={showListEmptyComponent} emptyText={emptyText} themeMode={themeMode}/>),
+                        useModal: true,
+                        centerDisplay: true, // V17: Force center display for useTextInput=false
+                        onModalClose: () => {
+                            debugLog('AutoPositionedPopup V17 onModalClose tag=', tag);
+                            removeRootView(tag, forceRemoveAllRootViewOnItemSelected, rootViewsRef.current);
+                            setState((prevState) => (Object.assign({}, prevState)));
+                            setSearchQuery('');
+                        },
+                    });
                 }
+                return; // V17: Early return after handling !useTextInput case
             }
         }
     }, [isKeyboardFullyShown,
@@ -776,6 +705,10 @@ const AutoPositionedPopup = memo(forwardRef((props, parentRef) => {
         tag, TextInputProps,
         state.selectedItem, showListEmptyComponent, themeMode
     ]);
+    // V18: All positioning logic is now in the useEffect above
+    // V18 FIX (2025-01-04): Wait 1000ms after keyboard appears before measuring position
+    // This ensures trigger position is stable after KeyboardAwareScrollView scrolls
+    // Formula: top = componentY - popupHeight (popup bottom touches trigger top exactly)
     // Imperative handle for parent component access
     useImperativeHandle(parentRef, () => ({
         clearSelectedItem: () => {
@@ -950,7 +883,7 @@ const AutoPositionedPopup = memo(forwardRef((props, parentRef) => {
             }} key={`textinput-${tag}`} style={[
                 styles.inputStyle,
                 stableInputStyle,
-                (themeMode === 'dark' && { color: '#fff' })
+                (themeMode === 'dark' && { color: '#fff' }),
             ]} textAlign={stableTextInputProps && stableTextInputProps['textAlign'] || 'left'} multiline={stableTextInputProps && stableTextInputProps['multiline'] || false} numberOfLines={stableTextInputProps && stableTextInputProps['numberOfLines'] || 1} onChangeText={(searchQuery) => {
                 ref_searchQuery.current = searchQuery;
                 debugLog('AutoPositionedPopup onChangeText rootViews=', rootViews);
@@ -1007,10 +940,13 @@ const AutoPositionedPopup = memo(forwardRef((props, parentRef) => {
                     });
                     // Capture trigger button position BEFORE switching to TextInput
                     // This is critical because triggerBtnRef will become null after isFocus=true
-                    if (triggerBtnRef.current && (parentScrollViewRef === null || parentScrollViewRef === void 0 ? void 0 : parentScrollViewRef.current)) {
+                    // IMPORTANT: Always capture position regardless of parentScrollViewRef
+                    if (triggerBtnRef.current) {
                         triggerBtnRef.current.measureInWindow((x, y, width, height) => {
                             debugLog('AutoPositionedPopup onPress: captured trigger position=', { tag, x, y, width, height });
-                            triggerPositionRef.current = { x, y, width, height };
+                            if (x !== undefined && y !== undefined && width !== undefined && height !== undefined) {
+                                triggerPositionRef.current = { x, y, width, height };
+                            }
                         });
                     }
                     if (useTextInput) {
@@ -1050,6 +986,9 @@ const AutoPositionedPopup = memo(forwardRef((props, parentRef) => {
                         }
                     }
                     else {
+                        // V17 SIMPLIFICATION: For useTextInput=false, popup will be centered
+                        // No need for complex position measurement - just trigger focus
+                        debugLog('🔵🔵🔵 POPUP_V17 onPress useTextInput=false, will show centered popup');
                         setState((prevState) => {
                             return Object.assign(Object.assign({}, prevState), { isFocus: true });
                         });
@@ -1068,29 +1007,29 @@ const AutoPositionedPopup = memo(forwardRef((props, parentRef) => {
           </CustomRow>);
     }, [
         tag,
-        // ✅ CRITICAL FIX: Remove all props that may change frequently or are inline functions
+        // ⚠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
+        // fetchData,  // ❌Removed: inline function
+        // renderItem,  // ❌Removed: possibly inline function
+        // onItemSelected,  // ❌Removed: possibly inline function
+        // onSubmitEditing,  // ❌Removed: possibly inline function
         localSearch,
-        // placeholder,  // ❌ Removed: may change
-        // textAlign,  // ❌ Removed: may change
+        // placeholder,  // ❌Removed: may change
+        // textAlign,  // ❌Removed: may change
         pageSize,
         selectedItem,
-        // CustomRow,  // ❌ Removed: inline function, new reference each time
+        // CustomRow,  // ❌Removed: inline function, new reference each time
         useTextInput,
-        // btwChildren,  // ❌ Removed: inline function
-        // keyExtractor,  // ❌ Removed: possibly inline function
-        // AutoPositionedPopupBtnStyle,  // ❌ Removed: possibly inline object
-        // CustomPopView,  // ❌ Removed: may change
-        // CustomPopViewStyle,  // ❌ Removed: may change
+        // btwChildren,  // ❌Removed: inline function
+        // keyExtractor,  // ❌Removed: possibly inline function
+        // AutoPositionedPopupBtnStyle,  // ❌Removed: possibly inline object
+        // CustomPopView,  // ❌Removed: may change
+        // CustomPopViewStyle,  // ❌Removed: may change
         forceRemoveAllRootViewOnItemSelected,
         state.isFocus,
         showListEmptyComponent,
         emptyText,
-        // ✅ Removed most dependencies that may cause re-rendering, keeping only core dependencies that truly affect component structure
+        // ⚠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
     ]);
 }));