react-native-auto-positioned-popup 1.2.14 → 1.2.17

package/lib/AutoPositionedPopup.js

@@ -1,3 +1,14 @@
+import { debugLog } from './constants';
+// Module load marker - unique ID for tracking code version
+// DEBUG FLAG: Set to false to disable all console logs for better performance
+const POPUP_DEBUG = false;
+const debugLog = (...args) => {
+    if (POPUP_DEBUG) {
+        debugLog(...args);
+    }
+};
+// Only log module load in debug mode
+debugLog('POPUP_MODULE_V17_LOADED at ' + new Date().toISOString());
 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';
@@ -6,7 +17,7 @@ import { useRootView } from './RootViewContext';
 import { useKeyboardStatus } from './KeyboardManager';
 const queryChangeListeners = [];
 const emitQueryChange = (query) => {
-    console.log('AutoPositionedPopup.tsx emitQueryChange query=', query, ' listeners=', queryChangeListeners.length);
+    debugLog('AutoPositionedPopup.tsx emitQueryChange query=', query, ' listeners=', queryChangeListeners.length);
     queryChangeListeners.forEach((l) => l(query));
 };
 const subscribeQueryChange = (listener) => {
@@ -34,14 +45,14 @@ const ListItem = memo(({ updateState, item, index, selectedItem, themeMode }) =>
         rootViewsRef.current = rootViews;
     }, [rootViews]);
     return useMemo(() => {
-        // console.log('AutoPositionedPopup.tsx ListItem=', {index, item, selectedItem});
+        // debugLog('AutoPositionedPopup.tsx ListItem=', {index, item, selectedItem});
         const isSelected = item.id === (selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.id) || item.title == (selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.title);
         return (<TouchableOpacity key={item.id} style={[
                 styles.commonModalRow,
                 { backgroundColor: isSelected ? (themeMode === 'light' ? 'rgba(116, 116, 128, 0.08)' : 'rgba(120, 120, 128, 0.36)') : 'transparent' },
             ]} onPress={() => {
-                // console.log('AutoPositionedPopup.tsx ListItem onPress item=', item); // Commented to prevent spam
-                // console.log('AutoPositionedPopup.tsx ListItem onPress rootViews=', rootViewsRef.current); // Commented to prevent spam
+                // debugLog('AutoPositionedPopup.tsx ListItem onPress item=', item); // Commented to prevent spam
+                // debugLog('AutoPositionedPopup.tsx ListItem onPress rootViews=', rootViewsRef.current); // Commented to prevent spam
                 updateState('selectedItem', item);
             }}>
           <Text style={(themeMode === 'light' ? styles.ListItemCode : Object.assign(Object.assign({}, styles.ListItemCode), { color: '#fff' }))} numberOfLines={1} ellipsizeMode="tail">
@@ -69,16 +80,16 @@ const AutoPositionedPopupList = memo(({ tag, updateState, fetchData, keyExtracto
     useEffect(() => {
         (async () => {
         })();
-        console.log(`AutoPositionedPopupList componentDidMount`);
+        debugLog(`AutoPositionedPopupList componentDidMount`);
         //componentWillUnmount
         return () => {
-            console.log(`AutoPositionedPopupList componentWillUnmount`);
+            debugLog(`AutoPositionedPopupList componentWillUnmount`);
             setSearchQuery('');
         };
     }, []);
     useEffect(() => {
         const unsubscribe = subscribeQueryChange((newQuery) => {
-            console.log('AutoPositionedPopupList useEffect subscribeQueryChange newQuery=', newQuery);
+            debugLog('AutoPositionedPopupList useEffect subscribeQueryChange newQuery=', newQuery);
             ref_searchQuery.current = newQuery;
             if (ref_list.current) {
                 ref_list.current.scrollToTop();
@@ -88,19 +99,19 @@ const AutoPositionedPopupList = memo(({ tag, updateState, fetchData, keyExtracto
         return unsubscribe;
     }, []);
     const _updateState = (key, value) => {
-        console.log('AutoPositionedPopupList _updateState key=', key, ' value=', value);
+        debugLog('AutoPositionedPopupList _updateState key=', key, ' value=', value);
         setState((prevState) => (Object.assign(Object.assign({}, prevState), { [key]: value })));
-        console.log('AutoPositionedPopupList _updateState rootViews=', rootViewsRef.current);
+        debugLog('AutoPositionedPopupList _updateState rootViews=', rootViewsRef.current);
         updateState(key, value);
     };
     const _fetchData = async ({ pageIndex, pageSize: currentPageSize, }) => {
-        console.log('AutoPositionedPopupList _fetchData=', { pageIndex, pageSize: currentPageSize, 'state.localData': state.localData, 'ref_searchQuery.current': ref_searchQuery.current, localSearch });
+        debugLog('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;
                 return (_a = `${item.title}`) === null || _a === void 0 ? void 0 : _a.toLowerCase().includes(ref_searchQuery.current.toLowerCase());
             });
-            console.log('AutoPositionedPopupList _fetchData localSearch result=', result);
+            debugLog('AutoPositionedPopupList _fetchData localSearch result=', result);
             return Promise.resolve({
                 items: result,
                 pageIndex: 0,
@@ -113,7 +124,7 @@ const AutoPositionedPopupList = memo(({ tag, updateState, fetchData, keyExtracto
                 pageSize: pageSize || 10,
                 searchQuery: ref_searchQuery.current,
             });
-            console.log('AutoPositionedPopupList _fetchData res=', res);
+            debugLog('AutoPositionedPopupList _fetchData res=', res);
             if ((res === null || res === void 0 ? void 0 : res.items) && localSearch) {
                 setState((prevState) => {
                     return Object.assign(Object.assign({}, prevState), { localData: res.items });
@@ -130,16 +141,16 @@ const AutoPositionedPopupList = memo(({ tag, updateState, fetchData, keyExtracto
             return null;
         }
         catch (e) {
-            console.warn('Error in fetchData:', e);
+            debugLog('Error in fetchData:', e);
         }
-        console.log('AutoPositionedPopupList _fetchData res=', null);
+        debugLog('AutoPositionedPopupList _fetchData res=', null);
         return null;
     };
     const _renderItem = useCallback(({ item, index }) => {
         return <ListItem item={item} index={index} updateState={_updateState} selectedItem={state.selectedItem} themeMode={themeMode}/>;
     }, [state.selectedItem, themeMode]);
     return useMemo(() => {
-        console.log('AutoPositionedPopupList (global as any)?.$fake=', global === null || global === void 0 ? void 0 : global.$fake);
+        debugLog('AutoPositionedPopupList (global as any)?.$fake=', global === null || global === void 0 ? void 0 : global.$fake);
         // Babel configuration handles the path redirection based on global.$fake
         // No need for conditional import here
         return (<View style={[styles.baseModalView, styles.autoPositionedPopupList, { backgroundColor: themeMode === 'light' ? '#fff' : 'rgba(44, 44, 46, 1)', }]}>
@@ -164,7 +175,7 @@ const listLayout = {
 };
 // Main AutoPositionedPopup component
 const AutoPositionedPopup = memo(forwardRef((props, parentRef) => {
-    console.log('AutoPositionedPopup props=', props);
+    debugLog('AutoPositionedPopup props=', props);
     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 = {
@@ -174,12 +185,12 @@ const AutoPositionedPopup = memo(forwardRef((props, parentRef) => {
         };
         try {
             // const res1: any[] = await $api.xxx(pageSize)
-            // console.log('${NAME} xxx res=', res)
+            // debugLog('${NAME} xxx res=', res)
             // res.items = res1
             // 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)', 
@@ -191,7 +202,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);
@@ -244,7 +255,7 @@ const AutoPositionedPopup = memo(forwardRef((props, parentRef) => {
      */
     const scrollParentToTrigger = useCallback(() => {
         if (!(parentScrollViewRef === null || parentScrollViewRef === void 0 ? void 0 : parentScrollViewRef.current) || !triggerBtnRef.current) {
-            console.log('AutoPositionedPopup scrollParentToTrigger: No parentScrollViewRef or triggerBtnRef available');
+            debugLog('AutoPositionedPopup scrollParentToTrigger: No parentScrollViewRef or triggerBtnRef available');
             return;
         }
         // Use scrollToFocusedInput method from KeyboardAwareScrollView
@@ -252,16 +263,16 @@ const AutoPositionedPopup = memo(forwardRef((props, parentRef) => {
         const scrollView = parentScrollViewRef.current;
         const nodeHandle = findNodeHandle(triggerBtnRef.current);
         if (nodeHandle && scrollView) {
-            console.log('AutoPositionedPopup scrollParentToTrigger: Scrolling to trigger button with extraHeight=', scrollExtraHeight);
+            debugLog('AutoPositionedPopup scrollParentToTrigger: Scrolling to trigger button with extraHeight=', scrollExtraHeight);
             // KeyboardAwareScrollView has a scrollToFocusedInput method that handles this
             // However, it requires a ReactNode. We'll use scrollToPosition as an alternative.
             // First, measure the trigger button position relative to the ScrollView
             triggerBtnRef.current.measureInWindow((x, y, width, height) => {
                 if (y === undefined || height === undefined) {
-                    console.log('AutoPositionedPopup scrollParentToTrigger: measureInWindow returned undefined');
+                    debugLog('AutoPositionedPopup scrollParentToTrigger: measureInWindow returned undefined');
                     return;
                 }
-                console.log('AutoPositionedPopup scrollParentToTrigger: trigger position=', { x, y, width, height });
+                debugLog('AutoPositionedPopup scrollParentToTrigger: trigger position=', { x, y, width, height });
                 // Get keyboard height from Keyboard API
                 // On keyboard show, scroll to position that keeps trigger above keyboard
                 Keyboard.addListener('keyboardDidShow', (event) => {
@@ -270,7 +281,7 @@ const AutoPositionedPopup = memo(forwardRef((props, parentRef) => {
                     // Calculate if trigger is below keyboard
                     const triggerBottom = y + height;
                     const visibleAreaBottom = screenHeight - keyboardHeight;
-                    console.log('AutoPositionedPopup scrollParentToTrigger: keyboard data=', {
+                    debugLog('AutoPositionedPopup scrollParentToTrigger: keyboard data=', {
                         keyboardHeight,
                         screenHeight,
                         triggerBottom,
@@ -280,7 +291,7 @@ const AutoPositionedPopup = memo(forwardRef((props, parentRef) => {
                     if (triggerBottom > visibleAreaBottom) {
                         // Calculate how much to scroll
                         const scrollAmount = triggerBottom - visibleAreaBottom + scrollExtraHeight;
-                        console.log('AutoPositionedPopup scrollParentToTrigger: scrolling by', scrollAmount);
+                        debugLog('AutoPositionedPopup scrollParentToTrigger: scrolling by', scrollAmount);
                         // Use scrollForExtraHeightOnAndroid or scrollToPosition
                         if (typeof scrollView.scrollToPosition === 'function') {
                             // scrollToPosition(x, y, animated)
@@ -288,7 +299,7 @@ const AutoPositionedPopup = memo(forwardRef((props, parentRef) => {
                         }
                         else if (typeof scrollView.scrollToEnd === 'function') {
                             // Fallback: scroll to end might help in some cases
-                            console.log('AutoPositionedPopup scrollParentToTrigger: using scrollToEnd fallback');
+                            debugLog('AutoPositionedPopup scrollParentToTrigger: using scrollToEnd fallback');
                         }
                     }
                 });
@@ -300,19 +311,19 @@ const AutoPositionedPopup = memo(forwardRef((props, parentRef) => {
      * Uses stored trigger position (captured before TextInput replaces the trigger button)
      */
     const scrollToTriggerWithMeasure = useCallback(() => {
-        console.log('AutoPositionedPopup scrollToTriggerWithMeasure called, tag=', tag, {
+        debugLog('AutoPositionedPopup scrollToTriggerWithMeasure called, tag=', tag, {
             hasParentScrollViewRef: !!(parentScrollViewRef === null || parentScrollViewRef === void 0 ? void 0 : parentScrollViewRef.current),
             hasTriggerPosition: !!triggerPositionRef.current,
             triggerPosition: triggerPositionRef.current
         });
         if (!(parentScrollViewRef === null || parentScrollViewRef === void 0 ? void 0 : parentScrollViewRef.current)) {
-            console.log('AutoPositionedPopup scrollToTriggerWithMeasure: parentScrollViewRef not available, tag=', tag);
+            debugLog('AutoPositionedPopup scrollToTriggerWithMeasure: parentScrollViewRef not available, tag=', tag);
             return;
         }
         // Use stored trigger position (captured when trigger was clicked)
         const storedPosition = triggerPositionRef.current;
         if (!storedPosition) {
-            console.log('AutoPositionedPopup scrollToTriggerWithMeasure: no stored trigger position, tag=', tag);
+            debugLog('AutoPositionedPopup scrollToTriggerWithMeasure: no stored trigger position, tag=', tag);
             return;
         }
         const scrollView = parentScrollViewRef.current;
@@ -324,7 +335,7 @@ const AutoPositionedPopup = memo(forwardRef((props, parentRef) => {
         const keyboardApproxHeight = screenHeight * 0.4; // Conservative estimate
         const visibleAreaBottom = screenHeight - keyboardApproxHeight;
         const triggerBottom = triggerY + triggerHeight;
-        console.log('AutoPositionedPopup scrollToTriggerWithMeasure: calculations=', {
+        debugLog('AutoPositionedPopup scrollToTriggerWithMeasure: calculations=', {
             tag,
             triggerY,
             triggerHeight,
@@ -337,7 +348,7 @@ const AutoPositionedPopup = memo(forwardRef((props, parentRef) => {
         if (triggerBottom > visibleAreaBottom) {
             // Calculate scroll amount to bring trigger above keyboard
             const scrollAmount = triggerBottom - visibleAreaBottom + scrollExtraHeight;
-            console.log('AutoPositionedPopup scrollToTriggerWithMeasure: scrolling, amount=', scrollAmount, 'tag=', tag);
+            debugLog('AutoPositionedPopup scrollToTriggerWithMeasure: scrolling, amount=', scrollAmount, 'tag=', tag);
             // Use scrollForExtraHeightOnAndroid for KeyboardAwareScrollView
             if (typeof scrollView.scrollForExtraHeightOnAndroid === 'function') {
                 scrollView.scrollForExtraHeightOnAndroid(scrollAmount);
@@ -350,11 +361,11 @@ const AutoPositionedPopup = memo(forwardRef((props, parentRef) => {
                 scrollView.scrollTo({ y: scrollAmount, animated: true });
             }
             else {
-                console.log('AutoPositionedPopup scrollToTriggerWithMeasure: no scroll method available on scrollView');
+                debugLog('AutoPositionedPopup scrollToTriggerWithMeasure: no scroll method available on scrollView');
             }
         }
         else {
-            console.log('AutoPositionedPopup scrollToTriggerWithMeasure: trigger already visible, no scroll needed, tag=', tag);
+            debugLog('AutoPositionedPopup scrollToTriggerWithMeasure: trigger already visible, no scroll needed, tag=', tag);
         }
     }, [parentScrollViewRef, scrollExtraHeight, tag]);
     /**
@@ -363,10 +374,10 @@ const AutoPositionedPopup = memo(forwardRef((props, parentRef) => {
     useEffect(() => {
         (async () => {
         })();
-        console.log(`AutoPositionedPopup componentDidMount=`, { tag, CustomPopView });
+        debugLog(`AutoPositionedPopup componentDidMount=`, { tag, CustomPopView });
         //componentWillUnmount
         return () => {
-            console.log(`AutoPositionedPopup componentWillUnmount tag=`, tag);
+            debugLog(`AutoPositionedPopup componentWillUnmount tag=`, tag);
             removeRootView(tag, forceRemoveAllRootViewOnItemSelected, rootViewsRef.current);
             setSearchQuery('');
             if (textInputRef.current) {
@@ -379,7 +390,7 @@ const AutoPositionedPopup = memo(forwardRef((props, parentRef) => {
         };
     }, []);
     useEffect(() => {
-        console.log('AutoPositionedPopup rootViews=', { tag, rootViews });
+        debugLog('AutoPositionedPopup rootViews=', { tag, rootViews });
         rootViewsRef.current = rootViews;
         if (rootViews.length === 0) {
             hasAddedRootView.current = false;
@@ -394,23 +405,22 @@ const AutoPositionedPopup = memo(forwardRef((props, parentRef) => {
     }, [rootViews]);
     useEffect(() => {
         var _a, _b;
-        console.log('AutoPositionedPopup useEffect [selectedItem, state.selectedItem, tag]=', { tag, selectedItem, 'state.selectedItem': state.selectedItem });
-        console.log('AutoPositionedPopup useEffect state.selectedItem=', state.selectedItem);
+        debugLog('AutoPositionedPopup useEffect [selectedItem, state.selectedItem, tag]=', { tag, selectedItem, 'state.selectedItem': state.selectedItem });
+        debugLog('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');
+            debugLog('AutoPositionedPopup useEffect selectedItem!=state.selectedItem');
             setState((prevState) => {
                 return Object.assign(Object.assign({}, prevState), { selectedItem: selectedItem });
             });
         }
     }, [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 ||
             prevPropsRef.current.CustomPopViewStyle !== CustomPopViewStyle ||
             (prevPropsRef.current.TextInputProps !== TextInputProps && useTextInput);
-        console.log('AutoPositionedPopup useEffect [isKeyboardFullyShown,\n' +
+        debugLog('AutoPositionedPopup useEffect [isKeyboardFullyShown,\n' +
             '        state.isFocus,\n' +
             '        useTextInput,\n' +
             '        CustomPopView,\n' +
@@ -441,13 +451,18 @@ const AutoPositionedPopup = memo(forwardRef((props, parentRef) => {
             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()
-            // }
+        // 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
@@ -468,7 +483,7 @@ const AutoPositionedPopup = memo(forwardRef((props, parentRef) => {
                 // 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) {
-                    console.log('AutoPositionedPopup: Keyboard appeared, scrolling parent to keep trigger visible');
+                    debugLog('AutoPositionedPopup: Keyboard appeared, scrolling parent to keep trigger visible');
                     // Use a slight delay to ensure keyboard animation has started
                     setTimeout(() => {
                         scrollToTriggerWithMeasure();
@@ -488,97 +503,142 @@ const AutoPositionedPopup = memo(forwardRef((props, parentRef) => {
                 // then requestAnimationFrame ensures measurement happens after next render frame
                 setTimeout(() => {
                     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) => {
+                        // 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
+                        debugLog('AutoPositionedPopup DEBUG: refs status=', {
+                            hasTextInputRef: !!textInputRef.current,
+                            hasRefAutoPositionedPopup: !!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 });
+                            });
+                        }
+                        // 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,
+                                }
+                            });
+                            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');
+                        // Measure CURRENT position (after keyboard shifted the view)
+                        measureTarget.measureInWindow((x, y, width, height) => {
                             var _a;
-                            console.log('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
+                            debugLog('AutoPositionedPopup useTextInput: measured position for positioning=', {
+                                x, y, width, height,
+                                measureTarget: usingTextInputRef ? 'textInputRef' : 'refAutoPositionedPopup'
+                            });
+                            // Handle undefined values (can happen during navigation transitions)
                             if (x === undefined || y === undefined || width === undefined || height === undefined) {
-                                console.warn('AutoPositionedPopup useTextInput: measureInWindow returned undefined values, using fallback position');
+                                debugLog('AutoPositionedPopup useTextInput: measureInWindow returned undefined, using fallback');
                                 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;
+                                x = screenWidthFallback * 0.05;
                                 y = fallbackY;
-                                width = fallbackWidth;
+                                width = screenWidthFallback * 0.9;
                                 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
-                            console.log('AutoPositionedPopup useTextInput positioning data=', {
+                            // Calculate screen height and popup position
+                            const screenHeight = Dimensions.get('window').height;
+                            debugLog('AutoPositionedPopup useTextInput positioning data=', {
                                 screenHeight,
                                 componentY: y,
                                 componentHeight: height,
                                 listHeight: listLayout.height
                             });
-                            // 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;
-                            console.log('AutoPositionedPopup with keyboard: initial calculation for ABOVE position:', {
-                                componentY: y,
-                                componentHeight: height,
+                            // POSITIONING LOGIC (with keyboard):
+                            // Simple rule: popup must TOUCH the trigger with NO GAP
+                            // 1. Default: show ABOVE trigger (popup bottom touches trigger top)
+                            // 2. If ABOVE would overlap status bar: show BELOW (popup top touches trigger bottom)
+                            debugLog('AutoPositionedPopup POSITIONING:', {
+                                triggerY: y,
+                                triggerHeight: height,
+                                triggerBottom: y + height,
                                 popupHeight: listLayout.height,
+                                screenHeight,
+                                statusBarHeight
+                            });
+                            // 1. Default: show popup ABOVE the trigger
+                            // Popup has internal padding (12px from autoPositionedPopupList style)
+                            // To make popup CONTENT touch trigger (not container), add padding offset
+                            // Container bottom at y + POPUP_PADDING, content bottom at y (no gap)
+                            const POPUP_PADDING = 12;
+                            let popupY = y - listLayout.height + POPUP_PADDING;
+                            let position = 'ABOVE';
+                            debugLog('AutoPositionedPopup: trying ABOVE position:', {
                                 popupY,
                                 popupBottom: popupY + listLayout.height,
+                                contentBottom: popupY + listLayout.height - POPUP_PADDING,
                                 triggerTop: y,
-                                statusBarHeight
+                                paddingOffset: POPUP_PADDING,
+                                wouldOverlapStatusBar: popupY < statusBarHeight
                             });
-                            // 2. Check if showing above would go behind status bar
+                            // 2. If showing ABOVE would go behind status bar, show BELOW instead
                             if (popupY < statusBarHeight) {
-                                console.log('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;
-                                console.log('AutoPositionedPopup with keyboard: BELOW position calculated:', {
-                                    formula: 'y + 2*height',
-                                    y,
-                                    height,
-                                    popupY
+                                // Show BELOW: popup top at trigger bottom
+                                // Use trigger's measured height as buffer to account for row padding
+                                // The TextInput is only part of the trigger row - row height scales with trigger height
+                                const BELOW_BUFFER = height;
+                                popupY = y + height + BELOW_BUFFER;
+                                position = 'BELOW';
+                                debugLog('AutoPositionedPopup: using BELOW position (ABOVE overlaps status bar):', {
+                                    popupY,
+                                    triggerBottom: y + height,
+                                    buffer: BELOW_BUFFER,
+                                    actualGap: BELOW_BUFFER
                                 });
-                                // 3. Also check if showing below would go off the bottom
+                                // 3. Safety check: if BELOW would go off screen bottom, clamp it
                                 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(statusBarHeight, y - listLayout.height), maxY);
+                                    popupY = maxY;
+                                    debugLog('AutoPositionedPopup: clamped to screen bottom:', { popupY, maxY });
                                 }
                             }
                             else {
-                                console.log('AutoPositionedPopup with keyboard: showing ABOVE input field (preferred position)');
+                                debugLog('AutoPositionedPopup: using ABOVE position (preferred)');
                             }
+                            debugLog('AutoPositionedPopup FINAL POSITION:', { position, popupY, touchesTrigger: true });
                             ref_listPos.current = { x: x, y: popupY, width: width };
-                            console.log('AutoPositionedPopup useTextInput final position=', ref_listPos.current);
-                            setRootViewNativeStyle(tag, {
+                            debugLog('AutoPositionedPopup useTextInput final position=', ref_listPos.current);
+                            // Use updateRootView instead of setRootViewNativeStyle for more reliable style updates
+                            // setNativeProps may not work correctly when initial style is in an array
+                            const newStyle = {
                                 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,
-                            });
+                            };
+                            debugLog('AutoPositionedPopup useTextInput: applying new style via updateRootView=', newStyle);
+                            updateRootView(tag, { style: newStyle });
                             hasShownRootView.current = true;
                         });
                     });
@@ -586,7 +646,7 @@ const AutoPositionedPopup = memo(forwardRef((props, parentRef) => {
             }
             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 });
+                debugLog('AutoPositionedPopup isKeyboardFullyShown useEffect removeRootView (keyboard state changed)=', { tag, forceRemoveAllRootViewOnItemSelected, keyboardStateChanged });
                 removeRootView(tag, forceRemoveAllRootViewOnItemSelected);
                 setState((prevState) => {
                     return Object.assign(Object.assign({}, prevState), { isFocus: false });
@@ -597,173 +657,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) => {
-                    console.log('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 };
-                        console.log('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) => {
-                        console.log('AutoPositionedPopup calculateOptimalPosition executing');
-                        // Use window height (visible area) instead of screen height
-                        const screenHeight = Dimensions.get('window').height;
-                        console.log('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;
-                        console.log('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) {
-                            console.log('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;
-                            console.log('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
-                                console.log('AutoPositionedPopup: both positions problematic, clamping to visible area');
-                                popupY = Math.min(Math.max(statusBarHeight, componentY - popupHeight), maxY);
-                            }
-                        }
-                        else {
-                            console.log('AutoPositionedPopup: showing ABOVE input field (preferred position)');
-                        }
-                        console.log('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;
-                    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 !useTextInput ref_listPos.current=', ref_listPos.current);
-                    if (CustomPopView && CustomPopViewStyle) {
-                        // Position already calculated correctly above, no need to recalculate
-                        const PopViewComponent = CustomPopView();
-                        console.log('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: () => {
-                                console.log('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 {
-                        console.log('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: () => {
-                                console.log('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,
@@ -775,10 +714,15 @@ const AutoPositionedPopup = memo(forwardRef((props, parentRef) => {
         tag, TextInputProps,
         state.selectedItem, showListEmptyComponent, themeMode
     ]);
+    // V16: All positioning logic is now in the useEffect above (calculateOptimalPosition + processPosition)
+    // V16 FIX: Capture position in onPress callback BEFORE setState is called
+    // This ensures triggerPositionRef.current is set when useEffect runs
+    // Formula: top = componentY - popupHeight (popup bottom touches trigger top exactly)
+    debugLog('🟢 POPUP_MODULE_V16_LOADED - capturing position in onPress callback before setState');
     // Imperative handle for parent component access
     useImperativeHandle(parentRef, () => ({
         clearSelectedItem: () => {
-            console.log('AutoPositionedPopup clearSelectedItem tag=', tag);
+            debugLog('AutoPositionedPopup clearSelectedItem tag=', tag);
             setState((prevState) => {
                 return Object.assign(Object.assign({}, prevState), { selectedItem: undefined, isFocus: false });
             });
@@ -795,11 +739,11 @@ const AutoPositionedPopup = memo(forwardRef((props, parentRef) => {
         },
     }), []);
     const updateState = (key, value) => {
-        console.log('AutoPositionedPopup updateState=', { key, value });
+        debugLog('AutoPositionedPopup updateState=', { key, value });
         setState((prevState) => (Object.assign(Object.assign({}, prevState), { [key]: value })));
         if (key === 'selectedItem' && onItemSelected) {
             onItemSelected(value);
-            console.log('AutoPositionedPopup updateState onItemSelected rootViewsRef.current=', rootViewsRef.current);
+            debugLog('AutoPositionedPopup updateState onItemSelected rootViewsRef.current=', rootViewsRef.current);
             removeRootView(tag, forceRemoveAllRootViewOnItemSelected, rootViewsRef.current);
             hasAddedRootView.current = false;
             hasShownRootView.current = false;
@@ -832,17 +776,17 @@ const AutoPositionedPopup = memo(forwardRef((props, parentRef) => {
     // 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 stableInputStyle: `, { tag, inputStyle, themeMode });
+            debugLog(`AutoPositionedPopup stableInputStyle: `, { tag, inputStyle, themeMode });
             stableInputStyleRef.current = inputStyle;
         }
         return stableInputStyleRef.current;
     }, [inputStyle, tag, themeMode]);
     const stableTextInputProps = useMemo(() => {
         if (!shallowEqual(stableTextInputPropsRef.current, TextInputProps)) {
-            console.log(`AutoPositionedPopup TextInputProps deep change detected, updating stable reference - tag: ${tag}`);
+            debugLog(`AutoPositionedPopup TextInputProps deep change detected, updating stable reference - tag: ${tag}`);
             stableTextInputPropsRef.current = TextInputProps;
         }
-        console.log('AutoPositionedPopup stableTextInputProps=', { tag, TextInputProps, 'stableTextInputPropsRef.current': stableTextInputPropsRef.current });
+        debugLog('AutoPositionedPopup stableTextInputProps=', { tag, TextInputProps, 'stableTextInputPropsRef.current': stableTextInputPropsRef.current });
         return stableTextInputPropsRef.current;
     }, [TextInputProps, tag]);
     // Use useCallback to stabilize onFocus and onBlur callback references
@@ -853,7 +797,7 @@ const AutoPositionedPopup = memo(forwardRef((props, parentRef) => {
     const handleTextInputFocus = useCallback(() => {
         const currentTime = Date.now();
         const timeSinceLastFocus = currentTime - lastFocusTimeRef.current;
-        console.log('AutoPositionedPopup onFocus=', {
+        debugLog('AutoPositionedPopup onFocus=', {
             tag,
             'state.selectedItem': stateRef.current.selectedItem,
             'hasTriggeredFocus.current=': hasTriggeredFocus.current,
@@ -865,17 +809,17 @@ const AutoPositionedPopup = memo(forwardRef((props, parentRef) => {
         });
         // Prevent rapid repeated triggers (repeated events within 300ms are ignored)
         if (timeSinceLastFocus < 300) {
-            console.log('AutoPositionedPopup onFocus: Skip - event triggered too quickly (< 300ms)');
+            debugLog('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');
+            debugLog('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');
+            debugLog('AutoPositionedPopup onFocus: Skip - processing another focus event');
             return;
         }
         isFocusEventProcessingRef.current = true;
@@ -898,7 +842,7 @@ const AutoPositionedPopup = memo(forwardRef((props, parentRef) => {
         }, 100);
     }, [tag, isKeyboardFullyShown]); // Remove state.selectedItem, use stateRef instead
     const handleTextInputBlur = useCallback(() => {
-        console.log('AutoPositionedPopup onBlur=', {
+        debugLog('AutoPositionedPopup onBlur=', {
             tag,
             'textInputRef.current': textInputRef.current,
             'isKeyboardFullyShown': isKeyboardFullyShown,
@@ -906,7 +850,7 @@ const AutoPositionedPopup = memo(forwardRef((props, parentRef) => {
         });
         // 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');
+            debugLog('AutoPositionedPopup onBlur: Skip - keyboard still open, possibly caused by parent component re-render');
             return;
         }
         // Only reset internal state, do not actively close keyboard
@@ -930,29 +874,29 @@ const AutoPositionedPopup = memo(forwardRef((props, parentRef) => {
     // 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 memoizedTextInput=', { tag, useTextInput, 'state.isFocus': state.isFocus, stableTextInputProps });
+        debugLog('AutoPositionedPopup memoizedTextInput=', { tag, useTextInput, 'state.isFocus': state.isFocus, stableTextInputProps });
         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);
+                    debugLog(`AutoPositionedPopup TextInput created/mounted - tag: ${tag}, ref:`, ref);
                 }
                 else if (!ref && textInputRef.current) {
-                    console.log(`AutoPositionedPopup TextInput unmounted - tag: ${tag}`);
+                    debugLog(`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);
+                    debugLog(`AutoPositionedPopup TextInput replaced - tag: ${tag}, oldRef:`, textInputRef.current, 'newRef:', ref);
                 }
                 textInputRef.current = ref;
             }} 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;
-                console.log('AutoPositionedPopup onChangeText rootViews=', rootViews);
+                debugLog('AutoPositionedPopup onChangeText rootViews=', rootViews);
                 if (!localSearch) {
                     if (debounceTimerRef.current) {
                         clearTimeout(debounceTimerRef.current);
@@ -971,7 +915,7 @@ const AutoPositionedPopup = memo(forwardRef((props, parentRef) => {
                     Keyboard.dismiss();
                 }
             }} keyboardType={stableTextInputProps && stableTextInputProps['keyboardType'] || 'default'} clearButtonMode="while-editing" returnKeyType={stableTextInputProps && stableTextInputProps['returnKeyType'] || 'done'} maxLength={stableTextInputProps && stableTextInputProps['maxLength'] || 100} accessibilityLabel="selectInput" accessible={true} autoFocus={stableTextInputProps && stableTextInputProps['autoFocus'] || true} autoCorrect={false} underlineColorAndroid="transparent" editable={stableTextInputProps && stableTextInputProps['editable'] || true} secureTextEntry={stableTextInputProps && stableTextInputProps['secureTextEntry'] || false} defaultValue="" caretHidden={false} enablesReturnKeyAutomatically onFocus={handleTextInputFocus} onBlur={handleTextInputBlur} selectTextOnFocus={stableTextInputProps && stableTextInputProps['selectTextOnFocus'] || false} onSubmitEditing={(e) => {
-                console.log('AutoPositionedPopup.tsx onSubmitEditing e.nativeEvent.text=', e.nativeEvent.text);
+                debugLog('AutoPositionedPopup.tsx onSubmitEditing e.nativeEvent.text=', e.nativeEvent.text);
                 onSubmitEditing && onSubmitEditing(e);
             }}/>);
     }, [
@@ -990,11 +934,11 @@ const AutoPositionedPopup = memo(forwardRef((props, parentRef) => {
     // Render the component following project implementation
     return useMemo(() => {
         var _a;
-        console.log('AutoPositionedPopup render tag=', tag); // Now safe - circular dependency fixed
+        debugLog('AutoPositionedPopup render tag=', tag); // Now safe - circular dependency fixed
         return (<CustomRow>
             <View style={[styles.contain, style]} ref={refAutoPositionedPopup}>
               {!state.isFocus || !useTextInput ? (<TouchableOpacity ref={triggerBtnRef} style={[styles.AutoPositionedPopupBtn, AutoPositionedPopupBtnStyle]} disabled={AutoPositionedPopupBtnDisabled} onPress={() => {
-                    console.log('AutoPositionedPopup onPress=', {
+                    debugLog('AutoPositionedPopup onPress=', {
                         tag,
                         'state.isFocus': state.isFocus,
                         useTextInput,
@@ -1006,10 +950,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) => {
-                            console.log('AutoPositionedPopup onPress: captured trigger position=', { tag, x, y, width, height });
-                            triggerPositionRef.current = { x, y, width, height };
+                            debugLog('AutoPositionedPopup onPress: captured trigger position=', { tag, x, y, width, height });
+                            if (x !== undefined && y !== undefined && width !== undefined && height !== undefined) {
+                                triggerPositionRef.current = { x, y, width, height };
+                            }
                         });
                     }
                     if (useTextInput) {
@@ -1049,11 +996,14 @@ 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 });
                         });
                     }
-                    console.log('AutoPositionedPopup onPress done');
+                    debugLog('AutoPositionedPopup onPress done');
                 }}>
                   {!btwChildren ? (<Text style={[
                         styles.searchQueryTxt,
@@ -1067,29 +1017,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
     ]);
 }));