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

package/lib/AutoPositionedPopup.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"AutoPositionedPopup.d.ts","sourceRoot":"","sources":["../src/AutoPositionedPopup.tsx"],"names":[],"mappings":"AAAA,OAAO,KAYN,MAAM,OAAO,CAAC;AAgBf,OAAO,EAAC,wBAAwB,EAAqB,MAAM,4BAA4B,CAAC;AA6QxF,QAAA,MAAM,mBAAmB,qFAmmCxB,CAAC;AAEF,eAAe,mBAAmB,CAAC"}
+{"version":3,"file":"AutoPositionedPopup.d.ts","sourceRoot":"","sources":["../src/AutoPositionedPopup.tsx"],"names":[],"mappings":"AAYA,OAAO,KAYN,MAAM,OAAO,CAAC;AAgBf,OAAO,EAAC,wBAAwB,EAAqB,MAAM,4BAA4B,CAAC;AA6QxF,QAAA,MAAM,mBAAmB,qFAqiCxB,CAAC;AAEF,eAAe,mBAAmB,CAAC"}

package/lib/AutoPositionedPopup.js

@@ -1,4 +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';
@@ -131,7 +141,7 @@ const AutoPositionedPopupList = memo(({ tag, updateState, fetchData, keyExtracto
             return null;
         }
         catch (e) {
-            console.warn('Error in fetchData:', e);
+            debugLog('Error in fetchData:', e);
         }
         debugLog('AutoPositionedPopupList _fetchData res=', null);
         return null;
@@ -180,7 +190,7 @@ const AutoPositionedPopup = memo(forwardRef((props, parentRef) => {
             // res.needLoadMore = res1.length === pageSize
         }
         catch (e) {
-            console.warn('Error in fetch operation:', e);
+            debugLog('Error in fetch operation:', e);
         }
         return res;
     }, renderItem, onItemSelected, localSearch = false, pageSize = 20, selectedItem, useTextInput = false, btwChildren, CustomRow = ({ children }) => <View>{children}</View>, keyExtractor = (item) => String((item === null || item === void 0 ? void 0 : item.id) || ''), AutoPositionedPopupBtnDisabled = false, forceRemoveAllRootViewOnItemSelected = false, centerDisplay = false, selectedItemBackgroundColor = 'rgba(116, 116, 128, 0.08)', 
@@ -192,7 +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);
@@ -405,7 +415,6 @@ const AutoPositionedPopup = memo(forwardRef((props, parentRef) => {
         }
     }, [selectedItem, state.selectedItem, tag]);
     useEffect(() => {
-        var _a;
         // Detect if keyboard state has actually changed to avoid false triggers during parent component re-renders
         const keyboardStateChanged = prevIsKeyboardFullyShownRef.current !== isKeyboardFullyShown;
         const propsChanged = prevPropsRef.current.CustomPopView !== CustomPopView ||
@@ -442,13 +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) {
-            debugLog('AutoPositionedPopup: Skip execution - parent component re-rendered but keyboard state unchanged textInputRef.current=', textInputRef.current);
-            // if (!ref_isFocus.current) {
-            //   textInputRef.current?.focus()
-            // }
+        // CRITICAL FIX: Also allow execution when popup needs initial positioning
+        // hasAddedRootView.current = true means popup container exists
+        // hasShownRootView.current = false means positioning not done yet
+        // We MUST allow execution when popup needs positioning, even if keyboard state unchanged
+        if (!keyboardStateChanged && hasAddedRootView.current && hasShownRootView.current) {
+            debugLog('AutoPositionedPopup: Skip execution - already positioned and keyboard state unchanged');
             return;
         }
+        // Log when we're allowing execution for initial positioning
+        if (!keyboardStateChanged && hasAddedRootView.current && !hasShownRootView.current) {
+            debugLog('AutoPositionedPopup: ALLOWING execution for initial positioning (popup added but not positioned yet)');
+        }
         const getStatusBarHeight = () => {
             if (Platform.OS === 'android') {
                 // Android: Use StatusBar.currentHeight API
@@ -489,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;
-                            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
+                            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
+                            // 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;
-                            debugLog('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) {
-                                debugLog('AutoPositionedPopup with keyboard: would go behind status bar, showing BELOW instead');
-                                // Show BELOW the input field
-                                // Since y + height represents the trigger's "reference bottom" (accounting for measurement offset),
-                                // we need to add another height to position popup BELOW the actual trigger
-                                popupY = y + height + height;
-                                debugLog('AutoPositionedPopup with keyboard: BELOW position calculated:', {
-                                    formula: 'y + 2*height',
-                                    y,
-                                    height,
-                                    popupY
+                                // 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
-                                    debugLog('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 {
-                                debugLog('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 };
                             debugLog('AutoPositionedPopup useTextInput final position=', ref_listPos.current);
-                            setRootViewNativeStyle(tag, {
+                            // 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;
                         });
                     });
@@ -598,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) => {
-                    debugLog('AutoPositionedPopup !useTextInput measureInWindow=', { x, y, width, height, usingTriggerRef: !!triggerBtnRef.current });
-                    // CRITICAL FIX: Handle undefined values from measureInWindow
-                    // This can happen during navigation transitions or when view is not yet mounted
-                    if (x === undefined || y === undefined || width === undefined || height === undefined) {
-                        console.warn('AutoPositionedPopup: measureInWindow returned undefined values, using fallback position');
-                        // Use screen center as fallback position
-                        const screenHeight = Dimensions.get('window').height;
-                        const screenWidth = Dimensions.get('window').width;
-                        const fallbackY = (screenHeight - listLayout.height) / 2;
-                        const fallbackX = screenWidth * 0.05; // 5% from left
-                        const fallbackWidth = screenWidth * 0.9; // 90% width
-                        ref_listPos.current = { x: fallbackX, y: fallbackY, width: fallbackWidth };
-                        debugLog('AutoPositionedPopup !useTextInput using fallback position=', ref_listPos.current);
-                        // Proceed with fallback values
-                        x = fallbackX;
-                        y = fallbackY;
-                        width = fallbackWidth;
-                        height = 50; // Default height for the trigger element
-                    }
-                    // CORRECT POSITIONING LOGIC (as per user requirement)
-                    // Default: show popup ABOVE the input field
-                    // Only if that goes off the top of screen (considering status bar), show BELOW instead
-                    const calculateOptimalPosition = (componentY, componentHeight, popupHeight) => {
-                        debugLog('AutoPositionedPopup calculateOptimalPosition executing');
-                        // Use window height (visible area) instead of screen height
-                        const screenHeight = Dimensions.get('window').height;
-                        debugLog('AutoPositionedPopup positioning data:', {
-                            screenHeight,
-                            componentY,
-                            componentHeight,
-                            popupHeight,
-                            statusBarHeight,
-                            platform: Platform.OS
-                        });
-                        // FIXED POSITIONING LOGIC:
-                        // The popup uses position: 'absolute' relative to the RootViewProvider container
-                        // measureInWindow returns coordinates relative to the window (screen)
-                        // So we should NOT add statusBarHeight to the position calculation
-                        //
-                        // 1. Default: show popup ABOVE the trigger element
-                        // FIX: Use (componentY + componentHeight) as the trigger's bottom edge reference point
-                        // This compensates for measurement inaccuracies when trigger is inside complex layouts (FlatList, ScrollView)
-                        // The popup's bottom should be at the trigger's top with minimal gap (≤5px)
-                        // Formula: popup_top = trigger_bottom - componentHeight - popupHeight
-                        //          popup_bottom = trigger_bottom - componentHeight = trigger_top
-                        let popupY = componentY + componentHeight - popupHeight;
-                        debugLog('AutoPositionedPopup: initial calculation for ABOVE position:', {
-                            componentY,
-                            componentHeight,
-                            popupHeight,
-                            popupY,
-                            triggerBottom: componentY + componentHeight,
-                            statusBarHeight
-                        });
-                        // 2. Check if showing above would go off the top of screen (behind status bar)
-                        if (popupY < statusBarHeight) {
-                            debugLog('AutoPositionedPopup: would go behind status bar, showing BELOW instead');
-                            // Show BELOW the trigger element
-                            // Since componentY + componentHeight represents the trigger's "reference bottom" (accounting for measurement offset),
-                            // we need to add another componentHeight to position popup BELOW the actual trigger
-                            // Formula: popup top = componentY + (2 * componentHeight)
-                            //   - (componentY + componentHeight) = trigger's actual top (compensated)
-                            //   - + componentHeight = skip past trigger height to get to trigger's actual bottom
-                            popupY = componentY + componentHeight + componentHeight;
-                            debugLog('AutoPositionedPopup: BELOW position calculated:', {
-                                formula: 'componentY + 2*componentHeight',
-                                componentY,
-                                componentHeight,
-                                popupY
-                            });
-                            // 3. Also check if showing below would go off the bottom of screen
-                            const maxY = screenHeight - popupHeight;
-                            if (popupY > maxY) {
-                                // If both positions are problematic, clamp to visible area
-                                // Prioritize showing as close to trigger as possible
-                                debugLog('AutoPositionedPopup: both positions problematic, clamping to visible area');
-                                popupY = Math.min(Math.max(statusBarHeight, componentY - popupHeight), maxY);
-                            }
-                        }
-                        else {
-                            debugLog('AutoPositionedPopup: showing ABOVE input field (preferred position)');
-                        }
-                        debugLog('AutoPositionedPopup final position:', {
-                            popupY,
-                            'showing above': popupY < componentY,
-                            'below status bar': popupY >= statusBarHeight
-                        });
-                        return { finalY: popupY, showAbove: popupY < componentY };
-                    };
-                    // Calculate position ONCE based on actual popup height
-                    const actualPopupHeight = CustomPopView && CustomPopViewStyle && typeof CustomPopViewStyle.height === 'number'
-                        ? CustomPopViewStyle.height
-                        : listLayout.height;
-                    debugLog('AutoPositionedPopup 🔥 Using actualPopupHeight for calculation:', { actualPopupHeight, CustomPopView: !!CustomPopView });
-                    const positionResult = calculateOptimalPosition(y, height, actualPopupHeight);
-                    debugLog('AutoPositionedPopup FINAL position result:', positionResult);
-                    ref_listPos.current = { x: x, y: positionResult.finalY, width: width };
-                    debugLog('AutoPositionedPopup !useTextInput ref_listPos.current=', ref_listPos.current);
-                    if (CustomPopView && CustomPopViewStyle) {
-                        // Position already calculated correctly above, no need to recalculate
-                        const PopViewComponent = CustomPopView();
-                        debugLog('AutoPositionedPopup !useTextInput addRootView=', { CustomPopViewStyle, PopViewComponent, 'state.selectedItem': state.selectedItem });
-                        addRootView({
-                            id: tag,
-                            style: !centerDisplay
-                                ? Object.assign({ top: ref_listPos.current.y, left: popUpViewStyle === null || popUpViewStyle === void 0 ? void 0 : popUpViewStyle.left, width: popUpViewStyle === null || popUpViewStyle === void 0 ? void 0 : popUpViewStyle.width, height: listLayout.height, opacity: 1 }, CustomPopViewStyle) : Object.assign({ width: popUpViewStyle === null || popUpViewStyle === void 0 ? void 0 : popUpViewStyle.width, height: listLayout.height }, CustomPopViewStyle),
-                            component: <PopViewComponent selectedItem={state.selectedItem}></PopViewComponent>,
-                            useModal: true,
-                            onModalClose: () => {
-                                debugLog('AutoPositionedPopup onModalClose');
-                                removeRootView(tag, forceRemoveAllRootViewOnItemSelected, rootViewsRef.current);
-                                setState((prevState) => {
-                                    return Object.assign(Object.assign({}, prevState), { isFocus: false });
-                                });
-                                hasAddedRootView.current = false;
-                                hasShownRootView.current = false;
-                                hasTriggeredFocus.current = false;
-                                setSearchQuery('');
-                            },
-                            centerDisplay,
-                        });
-                    }
-                    else {
-                        debugLog('AutoPositionedPopup !useTextInput addRootView tag=', tag);
-                        addRootView({
-                            id: tag,
-                            style: {
-                                top: ref_listPos.current.y,
-                                left: popUpViewStyle === null || popUpViewStyle === void 0 ? void 0 : popUpViewStyle.left,
-                                width: popUpViewStyle === null || popUpViewStyle === void 0 ? void 0 : popUpViewStyle.width,
-                                height: listLayout.height,
-                                opacity: 1,
-                            },
-                            component: (<AutoPositionedPopupList tag={tag} updateState={updateState} fetchData={fetchData} pageSize={pageSize} renderItem={renderItem} selectedItem={state.selectedItem} localSearch={localSearch} showListEmptyComponent={showListEmptyComponent} emptyText={emptyText} themeMode={themeMode}/>),
-                            useModal: true,
-                            onModalClose: () => {
-                                debugLog('AutoPositionedPopup onModalClose tag=', tag);
-                                removeRootView(tag, forceRemoveAllRootViewOnItemSelected, rootViewsRef.current);
-                                setState((prevState) => {
-                                    return Object.assign({}, prevState);
-                                });
-                                setSearchQuery('');
-                            },
-                        });
-                    }
-                });
-            }
-        }
-        if (isKeyboardFullyShown) {
-            ref_isFocus.current = (_a = state.isFocus) !== null && _a !== void 0 ? _a : false;
-            if (isKeyboardFullyShown !== keyboardVisibleRef.current) {
-                keyboardVisibleRef.current = isKeyboardFullyShown;
-                if (isKeyboardFullyShown && textInputRef.current) {
-                    if (ref_searchQuery.current) {
-                        textInputRef.current.setNativeProps({ text: ref_searchQuery.current });
-                    }
+                debugLog('🟢🟢🟢 POPUP_V17 useTextInput=false, showing popup in CENTER of screen');
+                const actualPopupHeight = CustomPopView && CustomPopViewStyle && typeof CustomPopViewStyle.height === 'number'
+                    ? CustomPopViewStyle.height
+                    : listLayout.height;
+                if (CustomPopView && CustomPopViewStyle) {
+                    const PopViewComponent = CustomPopView();
+                    debugLog('🔵🔵🔵 POPUP_V17 CustomPopView centerDisplay=true');
+                    addRootView({
+                        id: tag,
+                        style: Object.assign({ width: popUpViewStyle === null || popUpViewStyle === void 0 ? void 0 : popUpViewStyle.width }, CustomPopViewStyle),
+                        component: <PopViewComponent selectedItem={state.selectedItem}></PopViewComponent>,
+                        useModal: true,
+                        centerDisplay: true, // V17: Force center display for useTextInput=false
+                        onModalClose: () => {
+                            debugLog('AutoPositionedPopup V17 onModalClose tag=', tag);
+                            removeRootView(tag, forceRemoveAllRootViewOnItemSelected, rootViewsRef.current);
+                            setState((prevState) => (Object.assign({}, prevState)));
+                            setSearchQuery('');
+                        },
+                    });
+                }
+                else {
+                    debugLog('🔵🔵🔵 POPUP_V17 List centerDisplay=true, height=', listLayout.height);
+                    addRootView({
+                        id: tag,
+                        style: { width: popUpViewStyle === null || popUpViewStyle === void 0 ? void 0 : popUpViewStyle.width, height: listLayout.height, opacity: 1 },
+                        component: (<AutoPositionedPopupList tag={tag} updateState={updateState} fetchData={fetchData} pageSize={pageSize} renderItem={renderItem} selectedItem={state.selectedItem} localSearch={localSearch} showListEmptyComponent={showListEmptyComponent} emptyText={emptyText} themeMode={themeMode}/>),
+                        useModal: true,
+                        centerDisplay: true, // V17: Force center display for useTextInput=false
+                        onModalClose: () => {
+                            debugLog('AutoPositionedPopup V17 onModalClose tag=', tag);
+                            removeRootView(tag, forceRemoveAllRootViewOnItemSelected, rootViewsRef.current);
+                            setState((prevState) => (Object.assign({}, prevState)));
+                            setSearchQuery('');
+                        },
+                    });
                 }
+                return; // V17: Early return after handling !useTextInput case
             }
         }
     }, [isKeyboardFullyShown,
@@ -776,6 +714,11 @@ 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: () => {
@@ -950,7 +893,7 @@ const AutoPositionedPopup = memo(forwardRef((props, parentRef) => {
             }} key={`textinput-${tag}`} style={[
                 styles.inputStyle,
                 stableInputStyle,
-                (themeMode === 'dark' && { color: '#fff' })
+                (themeMode === 'dark' && { color: '#fff' }),
             ]} textAlign={stableTextInputProps && stableTextInputProps['textAlign'] || 'left'} multiline={stableTextInputProps && stableTextInputProps['multiline'] || false} numberOfLines={stableTextInputProps && stableTextInputProps['numberOfLines'] || 1} onChangeText={(searchQuery) => {
                 ref_searchQuery.current = searchQuery;
                 debugLog('AutoPositionedPopup onChangeText rootViews=', rootViews);
@@ -1007,10 +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) => {
                             debugLog('AutoPositionedPopup onPress: captured trigger position=', { tag, x, y, width, height });
-                            triggerPositionRef.current = { x, y, width, height };
+                            if (x !== undefined && y !== undefined && width !== undefined && height !== undefined) {
+                                triggerPositionRef.current = { x, y, width, height };
+                            }
                         });
                     }
                     if (useTextInput) {
@@ -1050,6 +996,9 @@ const AutoPositionedPopup = memo(forwardRef((props, parentRef) => {
                         }
                     }
                     else {
+                        // V17 SIMPLIFICATION: For useTextInput=false, popup will be centered
+                        // No need for complex position measurement - just trigger focus
+                        debugLog('🔵🔵🔵 POPUP_V17 onPress useTextInput=false, will show centered popup');
                         setState((prevState) => {
                             return Object.assign(Object.assign({}, prevState), { isFocus: true });
                         });
@@ -1068,29 +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
     ]);
 }));