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

package/lib/AutoPositionedPopup.js

@@ -1,12 +1,13 @@
+import { debugLog } from './constants';
 import React, { forwardRef, memo, useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState, } from 'react';
-import { Dimensions, Keyboard, Platform, StatusBar, Text, TextInput as RNTextInput, TouchableOpacity, View, } from 'react-native';
+import { Dimensions, findNodeHandle, Keyboard, Platform, StatusBar, Text, TextInput as RNTextInput, TouchableOpacity, View, } from 'react-native';
 import { AdvancedFlatList } from 'react-native-advanced-flatlist';
 import styles from './AutoPositionedPopup.style';
 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 +35,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 +70,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 +89,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 +114,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 });
@@ -132,14 +133,14 @@ const AutoPositionedPopupList = memo(({ tag, updateState, fetchData, keyExtracto
         catch (e) {
             console.warn('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 +165,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,7 +175,7 @@ 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
         }
@@ -184,7 +185,7 @@ const AutoPositionedPopup = memo(forwardRef((props, parentRef) => {
         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)', 
     // textAlign = 'right',
-    CustomPopView = undefined, CustomPopViewStyle, showListEmptyComponent = true, emptyText = '', onChangeText, themeMode = 'light', } = props;
+    CustomPopView = undefined, CustomPopViewStyle, showListEmptyComponent = true, emptyText = '', onChangeText, themeMode = 'light', parentScrollViewRef, scrollExtraHeight = 100, } = props;
     // State management similar to project implementation
     const [state, setState] = useState({
         isFocus: false,
@@ -203,6 +204,8 @@ const AutoPositionedPopup = memo(forwardRef((props, parentRef) => {
     const keyboardVisibleRef = useRef(false);
     const refAutoPositionedPopup = useRef(null);
     const ref_searchQuery = useRef('');
+    // Store trigger button position when clicked (before it's replaced by TextInput)
+    const triggerPositionRef = useRef(null);
     // Add ref to track previous keyboard state to avoid false triggers during parent component re-renders
     const prevIsKeyboardFullyShownRef = useRef(false);
     const prevPropsRef = useRef({});
@@ -235,16 +238,136 @@ const AutoPositionedPopup = memo(forwardRef((props, parentRef) => {
         ref_isKeyboardFullyShown.current = isKeyboardFullyShown;
     }, [isKeyboardFullyShown]);
     const theme = defaultTheme;
+    /**
+     * Scrolls the parent KeyboardAwareScrollView to make the trigger button visible
+     * when keyboard appears and may cover the trigger.
+     * Uses the triggerBtnRef to measure position and scrolls parent accordingly.
+     */
+    const scrollParentToTrigger = useCallback(() => {
+        if (!(parentScrollViewRef === null || parentScrollViewRef === void 0 ? void 0 : parentScrollViewRef.current) || !triggerBtnRef.current) {
+            debugLog('AutoPositionedPopup scrollParentToTrigger: No parentScrollViewRef or triggerBtnRef available');
+            return;
+        }
+        // Use scrollToFocusedInput method from KeyboardAwareScrollView
+        // This method scrolls the ScrollView to make the specified node visible
+        const scrollView = parentScrollViewRef.current;
+        const nodeHandle = findNodeHandle(triggerBtnRef.current);
+        if (nodeHandle && scrollView) {
+            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) {
+                    debugLog('AutoPositionedPopup scrollParentToTrigger: measureInWindow returned undefined');
+                    return;
+                }
+                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) => {
+                    const keyboardHeight = event.endCoordinates.height;
+                    const screenHeight = Dimensions.get('window').height;
+                    // Calculate if trigger is below keyboard
+                    const triggerBottom = y + height;
+                    const visibleAreaBottom = screenHeight - keyboardHeight;
+                    debugLog('AutoPositionedPopup scrollParentToTrigger: keyboard data=', {
+                        keyboardHeight,
+                        screenHeight,
+                        triggerBottom,
+                        visibleAreaBottom,
+                        needsScroll: triggerBottom > visibleAreaBottom
+                    });
+                    if (triggerBottom > visibleAreaBottom) {
+                        // Calculate how much to scroll
+                        const scrollAmount = triggerBottom - visibleAreaBottom + scrollExtraHeight;
+                        debugLog('AutoPositionedPopup scrollParentToTrigger: scrolling by', scrollAmount);
+                        // Use scrollForExtraHeightOnAndroid or scrollToPosition
+                        if (typeof scrollView.scrollToPosition === 'function') {
+                            // scrollToPosition(x, y, animated)
+                            scrollView.scrollToPosition(0, scrollAmount, true);
+                        }
+                        else if (typeof scrollView.scrollToEnd === 'function') {
+                            // Fallback: scroll to end might help in some cases
+                            debugLog('AutoPositionedPopup scrollParentToTrigger: using scrollToEnd fallback');
+                        }
+                    }
+                });
+            });
+        }
+    }, [parentScrollViewRef, scrollExtraHeight]);
+    /**
+     * Scroll parent KeyboardAwareScrollView to keep trigger visible above keyboard
+     * Uses stored trigger position (captured before TextInput replaces the trigger button)
+     */
+    const scrollToTriggerWithMeasure = useCallback(() => {
+        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)) {
+            debugLog('AutoPositionedPopup scrollToTriggerWithMeasure: parentScrollViewRef not available, tag=', tag);
+            return;
+        }
+        // Use stored trigger position (captured when trigger was clicked)
+        const storedPosition = triggerPositionRef.current;
+        if (!storedPosition) {
+            debugLog('AutoPositionedPopup scrollToTriggerWithMeasure: no stored trigger position, tag=', tag);
+            return;
+        }
+        const scrollView = parentScrollViewRef.current;
+        const { y: triggerY, height: triggerHeight } = storedPosition;
+        // Get keyboard height and screen dimensions
+        const screenHeight = Dimensions.get('window').height;
+        // Calculate keyboard height (approximate - keyboard typically takes 40-50% of screen on Android)
+        // We'll use the trigger position to determine if scrolling is needed
+        const keyboardApproxHeight = screenHeight * 0.4; // Conservative estimate
+        const visibleAreaBottom = screenHeight - keyboardApproxHeight;
+        const triggerBottom = triggerY + triggerHeight;
+        debugLog('AutoPositionedPopup scrollToTriggerWithMeasure: calculations=', {
+            tag,
+            triggerY,
+            triggerHeight,
+            triggerBottom,
+            screenHeight,
+            visibleAreaBottom,
+            needsScroll: triggerBottom > visibleAreaBottom
+        });
+        // Check if trigger is below the visible area (covered by keyboard)
+        if (triggerBottom > visibleAreaBottom) {
+            // Calculate scroll amount to bring trigger above keyboard
+            const scrollAmount = triggerBottom - visibleAreaBottom + scrollExtraHeight;
+            debugLog('AutoPositionedPopup scrollToTriggerWithMeasure: scrolling, amount=', scrollAmount, 'tag=', tag);
+            // Use scrollForExtraHeightOnAndroid for KeyboardAwareScrollView
+            if (typeof scrollView.scrollForExtraHeightOnAndroid === 'function') {
+                scrollView.scrollForExtraHeightOnAndroid(scrollAmount);
+            }
+            else if (typeof scrollView.scrollToPosition === 'function') {
+                scrollView.scrollToPosition(0, scrollAmount, true);
+            }
+            else if ('scrollTo' in scrollView && typeof scrollView.scrollTo === 'function') {
+                // Fallback to standard ScrollView method
+                scrollView.scrollTo({ y: scrollAmount, animated: true });
+            }
+            else {
+                debugLog('AutoPositionedPopup scrollToTriggerWithMeasure: no scroll method available on scrollView');
+            }
+        }
+        else {
+            debugLog('AutoPositionedPopup scrollToTriggerWithMeasure: trigger already visible, no scroll needed, tag=', tag);
+        }
+    }, [parentScrollViewRef, scrollExtraHeight, tag]);
     /**
      * componentDidMount && componentWillUnmount
      */
     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) {
@@ -257,7 +380,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;
@@ -272,10 +395,10 @@ 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 });
             });
@@ -288,7 +411,7 @@ const AutoPositionedPopup = memo(forwardRef((props, parentRef) => {
         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' +
@@ -320,7 +443,7 @@ const AutoPositionedPopup = memo(forwardRef((props, parentRef) => {
         };
         // 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);
+            debugLog('AutoPositionedPopup: Skip execution - parent component re-rendered but keyboard state unchanged textInputRef.current=', textInputRef.current);
             // if (!ref_isFocus.current) {
             //   textInputRef.current?.focus()
             // }
@@ -342,6 +465,16 @@ 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);
+                }
                 // 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
@@ -361,7 +494,7 @@ const AutoPositionedPopup = memo(forwardRef((props, parentRef) => {
                         const measureTarget = triggerBtnRef.current || refAutoPositionedPopup.current;
                         measureTarget === null || measureTarget === void 0 ? void 0 : 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 });
+                            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) {
@@ -389,7 +522,7 @@ const AutoPositionedPopup = memo(forwardRef((props, parentRef) => {
                             // 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=', {
+                            debugLog('AutoPositionedPopup useTextInput positioning data=', {
                                 screenHeight,
                                 componentY: y,
                                 componentHeight: height,
@@ -401,26 +534,27 @@ const AutoPositionedPopup = memo(forwardRef((props, parentRef) => {
                             // So we should NOT add statusBarHeight to the position calculation
                             //
                             // 1. Default: show popup ABOVE the input field
-                            // FIX: Use (y + height) as the trigger's bottom edge reference point
-                            // This compensates for measurement inaccuracies when trigger is inside complex layouts
-                            // Formula: popup_top = trigger_bottom - componentHeight - popupHeight
-                            let popupY = y + height - listLayout.height;
-                            console.log('AutoPositionedPopup with keyboard: initial calculation for ABOVE position:', {
+                            // 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,
-                                triggerBottom: y + height,
+                                popupBottom: popupY + listLayout.height,
+                                triggerTop: y,
                                 statusBarHeight
                             });
                             // 2. Check if showing above would go behind status bar
                             if (popupY < statusBarHeight) {
-                                console.log('AutoPositionedPopup with keyboard: would go behind status bar, showing BELOW instead');
+                                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;
-                                console.log('AutoPositionedPopup with keyboard: BELOW position calculated:', {
+                                debugLog('AutoPositionedPopup with keyboard: BELOW position calculated:', {
                                     formula: 'y + 2*height',
                                     y,
                                     height,
@@ -430,15 +564,15 @@ const AutoPositionedPopup = memo(forwardRef((props, parentRef) => {
                                 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');
+                                    debugLog('AutoPositionedPopup with keyboard: both positions problematic, clamping to visible area');
                                     popupY = Math.min(Math.max(statusBarHeight, y - listLayout.height), maxY);
                                 }
                             }
                             else {
-                                console.log('AutoPositionedPopup with keyboard: showing ABOVE input field (preferred position)');
+                                debugLog('AutoPositionedPopup with keyboard: showing ABOVE input field (preferred position)');
                             }
                             ref_listPos.current = { x: x, y: popupY, width: width };
-                            console.log('AutoPositionedPopup useTextInput final position=', ref_listPos.current);
+                            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,
@@ -453,7 +587,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 });
@@ -474,7 +608,7 @@ const AutoPositionedPopup = memo(forwardRef((props, parentRef) => {
                 // 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 });
+                    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) {
@@ -486,7 +620,7 @@ const AutoPositionedPopup = memo(forwardRef((props, parentRef) => {
                         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);
+                        debugLog('AutoPositionedPopup !useTextInput using fallback position=', ref_listPos.current);
                         // Proceed with fallback values
                         x = fallbackX;
                         y = fallbackY;
@@ -497,10 +631,10 @@ const AutoPositionedPopup = memo(forwardRef((props, parentRef) => {
                     // 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');
+                        debugLog('AutoPositionedPopup calculateOptimalPosition executing');
                         // Use window height (visible area) instead of screen height
                         const screenHeight = Dimensions.get('window').height;
-                        console.log('AutoPositionedPopup positioning data:', {
+                        debugLog('AutoPositionedPopup positioning data:', {
                             screenHeight,
                             componentY,
                             componentHeight,
@@ -520,7 +654,7 @@ const AutoPositionedPopup = memo(forwardRef((props, parentRef) => {
                         // 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:', {
+                        debugLog('AutoPositionedPopup: initial calculation for ABOVE position:', {
                             componentY,
                             componentHeight,
                             popupHeight,
@@ -530,7 +664,7 @@ const AutoPositionedPopup = memo(forwardRef((props, parentRef) => {
                         });
                         // 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');
+                            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
@@ -538,7 +672,7 @@ const AutoPositionedPopup = memo(forwardRef((props, parentRef) => {
                             //   - (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:', {
+                            debugLog('AutoPositionedPopup: BELOW position calculated:', {
                                 formula: 'componentY + 2*componentHeight',
                                 componentY,
                                 componentHeight,
@@ -549,14 +683,14 @@ const AutoPositionedPopup = memo(forwardRef((props, parentRef) => {
                             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');
+                                debugLog('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)');
+                            debugLog('AutoPositionedPopup: showing ABOVE input field (preferred position)');
                         }
-                        console.log('AutoPositionedPopup final position:', {
+                        debugLog('AutoPositionedPopup final position:', {
                             popupY,
                             'showing above': popupY < componentY,
                             'below status bar': popupY >= statusBarHeight
@@ -567,15 +701,15 @@ const AutoPositionedPopup = memo(forwardRef((props, parentRef) => {
                     const actualPopupHeight = CustomPopView && CustomPopViewStyle && typeof CustomPopViewStyle.height === 'number'
                         ? CustomPopViewStyle.height
                         : listLayout.height;
-                    console.log('AutoPositionedPopup 🔥 Using actualPopupHeight for calculation:', { actualPopupHeight, CustomPopView: !!CustomPopView });
+                    debugLog('AutoPositionedPopup 🔥 Using actualPopupHeight for calculation:', { actualPopupHeight, CustomPopView: !!CustomPopView });
                     const positionResult = calculateOptimalPosition(y, height, actualPopupHeight);
-                    console.log('AutoPositionedPopup FINAL position result:', positionResult);
+                    debugLog('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);
+                    debugLog('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 });
+                        debugLog('AutoPositionedPopup !useTextInput addRootView=', { CustomPopViewStyle, PopViewComponent, 'state.selectedItem': state.selectedItem });
                         addRootView({
                             id: tag,
                             style: !centerDisplay
@@ -583,7 +717,7 @@ const AutoPositionedPopup = memo(forwardRef((props, parentRef) => {
                             component: <PopViewComponent selectedItem={state.selectedItem}></PopViewComponent>,
                             useModal: true,
                             onModalClose: () => {
-                                console.log('AutoPositionedPopup onModalClose');
+                                debugLog('AutoPositionedPopup onModalClose');
                                 removeRootView(tag, forceRemoveAllRootViewOnItemSelected, rootViewsRef.current);
                                 setState((prevState) => {
                                     return Object.assign(Object.assign({}, prevState), { isFocus: false });
@@ -597,7 +731,7 @@ const AutoPositionedPopup = memo(forwardRef((props, parentRef) => {
                         });
                     }
                     else {
-                        console.log('AutoPositionedPopup !useTextInput addRootView tag=', tag);
+                        debugLog('AutoPositionedPopup !useTextInput addRootView tag=', tag);
                         addRootView({
                             id: tag,
                             style: {
@@ -610,7 +744,7 @@ const AutoPositionedPopup = memo(forwardRef((props, parentRef) => {
                             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);
+                                debugLog('AutoPositionedPopup onModalClose tag=', tag);
                                 removeRootView(tag, forceRemoveAllRootViewOnItemSelected, rootViewsRef.current);
                                 setState((prevState) => {
                                     return Object.assign({}, prevState);
@@ -645,7 +779,7 @@ const AutoPositionedPopup = memo(forwardRef((props, parentRef) => {
     // 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 });
             });
@@ -662,11 +796,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;
@@ -699,17 +833,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
@@ -720,7 +854,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,
@@ -732,17 +866,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;
@@ -765,7 +899,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,
@@ -773,7 +907,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
@@ -797,20 +931,20 @@ 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={[
@@ -819,7 +953,7 @@ const AutoPositionedPopup = memo(forwardRef((props, parentRef) => {
                 (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);
@@ -838,7 +972,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);
             }}/>);
     }, [
@@ -857,11 +991,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,
@@ -871,6 +1005,14 @@ const AutoPositionedPopup = memo(forwardRef((props, parentRef) => {
                         'selectedItem': selectedItem,
                         'ref_isKeyboardFullyShown.current': ref_isKeyboardFullyShown.current
                     });
+                    // 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)) {
+                        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 (useTextInput) {
                         const _addRootView = () => {
                             if (!hasAddedRootView.current) {
@@ -912,7 +1054,7 @@ const AutoPositionedPopup = memo(forwardRef((props, parentRef) => {
                             return Object.assign(Object.assign({}, prevState), { isFocus: true });
                         });
                     }
-                    console.log('AutoPositionedPopup onPress done');
+                    debugLog('AutoPositionedPopup onPress done');
                 }}>
                   {!btwChildren ? (<Text style={[
                         styles.searchQueryTxt,