react-native-auto-positioned-popup 1.0.5 → 1.0.6

package/lib/AutoPositionedPopup.js

@@ -1,8 +1,13 @@
 import React, { forwardRef, memo, useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState, } from 'react';
 import { Dimensions, Keyboard, Text, TextInput as RNTextInput, TouchableOpacity, View, } from 'react-native';
-import { AdvancedFlatList } from 'react-native-advanced-flatlist';
+// @ts-ignore - Skip type checking for third-party library with type issues
+import { AdvancedFlatList as AdvancedFlatListLib } from 'react-native-advanced-flatlist';
+// @ts-ignore - Direct import from source when using fake data
+import AdvancedFlatListSource from 'react-native-advanced-flatlist/src/AdvancedFlatList.tsx';
 import styles from './AutoPositionedPopup.style';
 import { useRootView } from './RootViewContext';
+import { useKeyboardStatus } from './KeyboardManager';
+import { useSafeAreaInsets } from "react-native-safe-area-context";
 const queryChangeListeners = [];
 const emitQueryChange = (query) => {
     console.log('AutoPositionedPopup.tsx emitQueryChange query=', query, ' listeners=', queryChangeListeners.length);
@@ -26,67 +31,146 @@ const defaultTheme = {
     },
 };
 // List item component for rendering individual items
-const ListItem = memo(({ item, index, selectedItem, onItemPress, theme, rootViewsRef, selectedItemBackgroundColor = 'rgba(116, 116, 128, 0.08)' }) => {
-    const isSelected = item.id === (selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.id);
-    return useMemo(() => (<TouchableOpacity key={item.id} style={[
-            styles.commonModalRow,
-            {
-                backgroundColor: isSelected ? selectedItemBackgroundColor : 'transparent',
-                borderColor: theme.colors.border,
-            },
-        ]} onPress={() => {
-            console.log('AutoPositionedPopup.tsx ListItem onPress item=', item);
-            if (rootViewsRef) {
-                console.log('AutoPositionedPopup.tsx ListItem onPress rootViews=', rootViewsRef.current);
-            }
-            onItemPress(item);
-        }}>
-      <Text style={[styles.ListItemCode, { color: theme.colors.text }]} numberOfLines={1} ellipsizeMode="tail">
-        {item.title}
-      </Text>
-    </TouchableOpacity>), [item, index, selectedItem, onItemPress, theme, rootViewsRef, isSelected, selectedItemBackgroundColor]);
+const ListItem = memo(({ updateState, item, index, selectedItem, }) => {
+    const { addRootView, setRootViewNativeStyle, removeRootView, rootViews } = useRootView();
+    const rootViewsRef = useRef(rootViews);
+    useEffect(() => {
+        rootViewsRef.current = rootViews;
+    }, [rootViews]);
+    return useMemo(() => {
+        // console.log('AutoPositionedPopup.tsx ListItem index=', index);
+        // console.log('AutoPositionedPopup.tsx ListItem item=', item);
+        const isSelected = item.id === (selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.id);
+        return (<TouchableOpacity key={item.id} style={[
+                styles.commonModalRow,
+                { backgroundColor: isSelected ? 'rgba(116, 116, 128, 0.08)' : '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
+                updateState('selectedItem', item);
+            }}>
+          <Text style={styles.ListItemCode} numberOfLines={1} ellipsizeMode="tail">
+            {item.title}
+          </Text>
+        </TouchableOpacity>);
+    }, [updateState, item, index, selectedItem, rootViewsRef]);
 });
-const PopupList = memo(({ data, selectedItem, onItemPress, renderItem, keyExtractor = (item) => String(item.id), theme, rootViewsRef, fetchData, localSearch = false, pageSize = 20, onDataUpdate, selectedItemBackgroundColor, }) => {
-    const [internalData, setInternalData] = useState(data);
-    const searchQueryRef = useRef('');
-    // Sync external data changes
+const AutoPositionedPopupList = memo(({ tag, updateState, fetchData, keyExtractor = (item) => String(item.id), renderItem, selectedItem, localSearch, pageSize, }) => {
+    const [state, setState] = useState({
+        selectedItem: selectedItem,
+        localData: [],
+    });
+    // Define an interface that matches the methods we need from CsxFlatList
+    const ref_list = useRef(null);
+    const ref_searchQuery = useRef('');
+    const { searchQuery, setSearchQuery, rootViews } = useRootView();
+    const rootViewsRef = useRef(rootViews);
     useEffect(() => {
-        setInternalData(data);
-    }, [data]);
-    // Listen to search query changes
+        rootViewsRef.current = rootViews;
+    }, [rootViews]);
+    /**
+     * componentDidMount && componentWillUnmount
+     */
     useEffect(() => {
-        const unsubscribe = subscribeQueryChange(async (newQuery) => {
-            console.log('PopupList subscribeQueryChange newQuery=', newQuery);
-            searchQueryRef.current = newQuery;
-            if (fetchData) {
-                try {
-                    const result = await fetchData({
-                        pageIndex: 0,
-                        pageSize,
-                        searchQuery: newQuery,
-                    });
-                    if (result === null || result === void 0 ? void 0 : result.items) {
-                        setInternalData(result.items);
-                        onDataUpdate === null || onDataUpdate === void 0 ? void 0 : onDataUpdate(result.items);
-                    }
-                }
-                catch (error) {
-                    console.error('PopupList fetchData error:', error);
-                }
-            }
-            else if (localSearch) {
-                // Local filtering
-                const filtered = data.filter(item => item.title.toLowerCase().includes(newQuery.toLowerCase()));
-                setInternalData(filtered);
-                onDataUpdate === null || onDataUpdate === void 0 ? void 0 : onDataUpdate(filtered);
+        (async () => {
+        })();
+        console.log(`AutoPositionedPopupList componentDidMount`);
+        //componentWillUnmount
+        return () => {
+            console.log(`AutoPositionedPopupList componentWillUnmount`);
+            setSearchQuery('');
+        };
+    }, []);
+    // useEffect(() => {
+    //   // 監聽 TextInput 事件，收到就刷新列表，不依賴 global searchQuery
+    //   // 將最新的 searchQuery 同步到 list 專用的 ref，供 _fetchData 使用
+    //   ref_searchQuery.current = searchQuery;
+    //   console.log('AutoPositionedPopupList useEffect searchQuery=', searchQuery);
+    //   console.log('AutoPositionedPopupList useEffect state.localData=', state.localData);
+    //   console.log('AutoPositionedPopupList useEffect ref_list.current=', ref_list.current);
+    //   console.log('AutoPositionedPopupList useEffect localSearch=', localSearch);
+    //   if (ref_list.current && (localSearch && state.localData.length > 0 || !localSearch)) {
+    //     ref_list.current.scrollToTop();
+    //     ref_list.current.refresh();
+    //   }
+    // }, [searchQuery, state.localData, localSearch]);
+    useEffect(() => {
+        const unsubscribe = subscribeQueryChange((newQuery) => {
+            console.log('AutoPositionedPopupList useEffect subscribeQueryChange newQuery=', newQuery);
+            ref_searchQuery.current = newQuery;
+            if (ref_list.current) {
+                ref_list.current.scrollToTop();
+                ref_list.current.refresh();
             }
         });
         return unsubscribe;
-    }, [fetchData, localSearch, pageSize, data, onDataUpdate]);
-    const defaultRenderItem = useCallback(({ item, index }) => (<ListItem item={item} index={index} selectedItem={selectedItem} onItemPress={onItemPress} theme={theme} rootViewsRef={rootViewsRef} selectedItemBackgroundColor={selectedItemBackgroundColor}/>), [selectedItem, onItemPress, theme, rootViewsRef, selectedItemBackgroundColor]);
-    return (<View style={[styles.autoPositionedPopupList, { backgroundColor: theme.colors.background }]}>
-      <AdvancedFlatList data={internalData} keyExtractor={keyExtractor} renderItem={renderItem || defaultRenderItem} keyboardShouldPersistTaps="always" showsVerticalScrollIndicator={true} nestedScrollEnabled={true}/>
-    </View>);
+    }, []);
+    const _updateState = (key, value) => {
+        console.log('AutoPositionedPopupList _updateState key=', key, ' value=', value);
+        setState((prevState) => (Object.assign(Object.assign({}, prevState), { [key]: value })));
+        console.log('AutoPositionedPopupList _updateState rootViews=', rootViewsRef.current);
+        updateState(key, value);
+    };
+    const _fetchData = async ({ pageIndex, pageSize: currentPageSize, }) => {
+        console.log('AutoPositionedPopupList _fetchData pageIndex=', pageIndex, ' pageSize=', currentPageSize);
+        console.log('AutoPositionedPopupList _fetchData state.localData=', state.localData);
+        console.log('AutoPositionedPopupList _fetchData ref_searchQuery.current=', ref_searchQuery.current);
+        console.log('AutoPositionedPopupList _fetchData localSearch=', localSearch);
+        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);
+            return Promise.resolve({
+                items: result,
+                pageIndex: 0,
+                needLoadMore: false,
+            });
+        }
+        try {
+            const res = await fetchData({
+                pageIndex,
+                pageSize: pageSize || 10,
+                searchQuery: ref_searchQuery.current,
+            });
+            console.log('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 });
+                });
+            }
+            return Promise.resolve(res);
+        }
+        catch (e) {
+            console.warn('Error in fetchData:', e);
+        }
+        console.log('AutoPositionedPopupList _fetchData res=', null);
+        return null;
+    };
+    const _renderItem = useCallback(({ item, index }) => {
+        return <ListItem item={item} index={index} updateState={_updateState} selectedItem={state.selectedItem}/>;
+    }, [state.selectedItem]);
+    return useMemo(() => {
+        console.log('AutoPositionedPopupList (global as any)?.$fake=', global === null || global === void 0 ? void 0 : global.$fake);
+        // Choose AdvancedFlatList version based on global.$fake
+        const AdvancedFlatListComponent = (global === null || global === void 0 ? void 0 : global.$fake) ? AdvancedFlatListSource : AdvancedFlatListLib;
+        return (<View style={[styles.baseModalView, styles.autoPositionedPopupList]}>
+          {/* @ts-ignore - Type assertion to bypass third-party library type issues */}
+          <AdvancedFlatListComponent style={[{ borderRadius: 0 }]} {...(ref_list && { ref: ref_list })} keyExtractor={keyExtractor} keyboardShouldPersistTaps={'always'} {...({ fetchData: _fetchData })} renderItem={renderItem || _renderItem}/>
+        </View>);
+    }, [tag,
+        updateState,
+        fetchData,
+        keyExtractor,
+        renderItem,
+        state.selectedItem,
+        state.localData,
+        searchQuery,
+        localSearch,
+        pageSize,
+        rootViewsRef,
+    ]);
 });
 // List layout constants
 const listLayout = {
@@ -95,14 +179,31 @@ const listLayout = {
 // Main AutoPositionedPopup component
 const AutoPositionedPopup = memo(forwardRef((props, parentRef) => {
     console.log('AutoPositionedPopup props=', props);
-    const { tag, style, AutoPositionedPopupBtnStyle, placeholder = 'Please Select', onSubmitEditing, TextInputProps = {}, inputStyle, labelStyle, popUpViewStyle = { left: '5%', width: '90%' }, fetchData, renderItem, onItemSelected, localSearch = false, pageSize = 20, selectedItem, useTextInput = false, btwChildren, CustomRow = ({ children }) => <View>{children}</View>, keyExtractor = (item) => item === null || item === void 0 ? void 0 : item.id, AutoPositionedPopupBtnDisabled = false, forceRemoveAllRootViewOnItemSelected = false, centerDisplay = false, selectedItemBackgroundColor = 'rgba(116, 116, 128, 0.08)', } = props;
+    const { tag, style, AutoPositionedPopupBtnStyle, placeholder = 'Please Select', onSubmitEditing, TextInputProps = {}, inputStyle, labelStyle, popUpViewStyle = { left: '5%', width: '90%' }, fetchData = async ({ pageIndex, pageSize, searchQuery, }) => {
+        const res = {
+            items: [],
+            pageIndex,
+            needLoadMore: false,
+        };
+        try {
+            // const res1: any[] = await $api.xxx(pageSize)
+            // console.log('${NAME} xxx res=', res)
+            // res.items = res1
+            // res.needLoadMore = res1.length === pageSize
+        }
+        catch (e) {
+            console.warn('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)', textAlign = 'right', CustomPopView = undefined, CustomPopViewStyle } = props;
     // State management similar to project implementation
     const [state, setState] = useState({
         isFocus: false,
         selectedItem: selectedItem,
     });
     // Use RootView context
-    const { addRootView, removeRootView, rootViews, setSearchQuery: setContextSearchQuery, setRootViewNativeStyle } = useRootView();
+    const { addRootView, setRootViewNativeStyle, removeRootView, rootViews, setSearchQuery } = useRootView();
+    const insets = useSafeAreaInsets();
     const rootViewsRef = useRef(rootViews);
     // Track TextInput focus and RootView states like project implementation
     const hasTriggeredFocus = useRef(false);
@@ -114,19 +215,42 @@ const AutoPositionedPopup = memo(forwardRef((props, parentRef) => {
     const ref_listPos = useRef();
     const keyboardVisibleRef = useRef(false);
     const refAutoPositionedPopup = useRef(null);
+    const ref_searchQuery = useRef('');
     // Simple keyboard status tracking (alternative to useKeyboardStatus hook)
-    const [isKeyboardFullyShown, setIsKeyboardFullyShown] = useState(false);
-    // Keyboard listeners
+    // Legacy state for compatibility
+    const [isVisible, setIsVisible] = useState(false);
+    const [data, setData] = useState([]);
+    const [loading, setLoading] = useState(false);
+    const [popupPosition, setPopupPosition] = useState({ top: 0, left: 0, width: 0 });
+    // Refs for performance optimization
+    const containerRef = useRef(null);
+    const textInputRef = useRef(null);
+    const debounceTimerRef = useRef(null);
+    const searchQueryRef = useRef(''); // Use ref instead of state to avoid re-renders
+    // Refs to store latest values for useEffect without adding to dependency array
+    const dataRef = useRef(data);
+    const isKeyboardFullyShown = useKeyboardStatus();
+    const theme = defaultTheme;
+    /**
+     * componentDidMount && componentWillUnmount
+     */
     useEffect(() => {
-        const keyboardDidShowListener = Keyboard.addListener('keyboardDidShow', () => {
-            setIsKeyboardFullyShown(true);
-        });
-        const keyboardDidHideListener = Keyboard.addListener('keyboardDidHide', () => {
-            setIsKeyboardFullyShown(false);
-        });
+        (async () => {
+        })();
+        console.log(`AutoPositionedPopup componentDidMount tag=`, tag);
+        console.log('AutoPositionedPopup componentDidMount CustomPopView=', CustomPopView);
+        //componentWillUnmount
         return () => {
-            keyboardDidShowListener === null || keyboardDidShowListener === void 0 ? void 0 : keyboardDidShowListener.remove();
-            keyboardDidHideListener === null || keyboardDidHideListener === void 0 ? void 0 : keyboardDidHideListener.remove();
+            console.log(`AutoPositionedPopup componentWillUnmount tag=`, tag);
+            removeRootView(tag, forceRemoveAllRootViewOnItemSelected, rootViewsRef.current);
+            setSearchQuery('');
+            if (textInputRef.current) {
+                textInputRef.current.blur();
+                hasTriggeredFocus.current = false;
+                hasAddedRootView.current = false;
+                hasShownRootView.current = false;
+                ref_isFocus.current = false;
+            }
         };
     }, []);
     useEffect(() => {
@@ -135,13 +259,14 @@ const AutoPositionedPopup = memo(forwardRef((props, parentRef) => {
         if (rootViews.length === 0) {
             hasAddedRootView.current = false;
             hasShownRootView.current = false;
+            ref_isFocus.current = false;
+            ref_isKeyboardFullyShown.current = false;
             hasTriggeredFocus.current = false;
             setState((prevState) => {
                 return Object.assign(Object.assign({}, prevState), { isFocus: false });
             });
         }
     }, [rootViews]);
-    // Sync selectedItem changes like project implementation
     useEffect(() => {
         var _a, _b;
         console.log('AutoPositionedPopup useEffect tag=', tag);
@@ -154,229 +279,6 @@ const AutoPositionedPopup = memo(forwardRef((props, parentRef) => {
             });
         }
     }, [selectedItem, state.selectedItem, tag]);
-    // Legacy state for compatibility
-    const [isVisible, setIsVisible] = useState(false);
-    const [data, setData] = useState([]);
-    const [loading, setLoading] = useState(false);
-    const [popupPosition, setPopupPosition] = useState({ top: 0, left: 0, width: 0 });
-    const popupId = useRef(`popup-${tag}-${Date.now()}`);
-    // Refs for performance optimization
-    const containerRef = useRef(null);
-    const textInputRef = useRef(null);
-    const debounceTimerRef = useRef(null);
-    const searchQueryRef = useRef(''); // Use ref instead of state to avoid re-renders
-    // Constants
-    const LIST_HEIGHT = 200;
-    const theme = defaultTheme;
-    // Fetch data function
-    const loadData = useCallback(async (query = '') => {
-        if (!fetchData)
-            return;
-        setLoading(true);
-        try {
-            const result = await fetchData({
-                pageIndex: 0,
-                pageSize,
-                searchQuery: query,
-            });
-            if (result === null || result === void 0 ? void 0 : result.items) {
-                setData(result.items);
-            }
-        }
-        catch (error) {
-            console.error('Error loading data:', error);
-        }
-        finally {
-            setLoading(false);
-        }
-    }, [fetchData, pageSize]);
-    // Handle search query change with debounce and event emission
-    const handleSearchChange = useCallback((query) => {
-        // Store in ref to avoid re-renders
-        searchQueryRef.current = query;
-        // Update TextInput value directly if needed
-        if (textInputRef.current) {
-            // The TextInput's value will be controlled by its own state
-        }
-        // Clear previous debounce timer
-        if (debounceTimerRef.current) {
-            clearTimeout(debounceTimerRef.current);
-        }
-        // Use debounce for performance optimization
-        debounceTimerRef.current = setTimeout(() => {
-            // Emit query change event to decouple components and avoid context re-rendering
-            emitQueryChange(searchQueryRef.current);
-        }, 300); // Use 300ms debounce like the original
-    }, []);
-    // Calculate popup position
-    const calculatePosition = useCallback(() => {
-        if (!containerRef.current)
-            return;
-        containerRef.current.measureInWindow((x, y, width, height) => {
-            const screenHeight = Dimensions.get('screen').height;
-            const screenWidth = Dimensions.get('screen').width;
-            let top = y + height;
-            let left = x;
-            let popupWidth = width;
-            // Check if popup should appear above the input
-            if (y + height + LIST_HEIGHT > screenHeight) {
-                top = y - LIST_HEIGHT;
-            }
-            // Adjust horizontal position if needed
-            if ((popUpViewStyle === null || popUpViewStyle === void 0 ? void 0 : popUpViewStyle.left) && (popUpViewStyle === null || popUpViewStyle === void 0 ? void 0 : popUpViewStyle.width)) {
-                const leftPercent = parseFloat(String(popUpViewStyle.left).replace('%', '')) / 100;
-                const widthPercent = parseFloat(String(popUpViewStyle.width).replace('%', '')) / 100;
-                left = screenWidth * leftPercent;
-                popupWidth = screenWidth * widthPercent;
-            }
-            setPopupPosition({ top, left, width: popupWidth });
-        });
-    }, [popUpViewStyle]);
-    // Hide popup using RootView
-    const hidePopup = useCallback(() => {
-        var _a, _b;
-        setIsVisible(false);
-        // Reset search query
-        searchQueryRef.current = '';
-        if (textInputRef.current) {
-            textInputRef.current.blur();
-            (_b = (_a = textInputRef.current).clear) === null || _b === void 0 ? void 0 : _b.call(_a); // Clear the TextInput
-        }
-        removeRootView(popupId.current, forceRemoveAllRootViewOnItemSelected, rootViewsRef.current);
-    }, [removeRootView, forceRemoveAllRootViewOnItemSelected]);
-    // Handle data updates from PopupList
-    const handleDataUpdate = useCallback((newData) => {
-        setData(newData);
-    }, []);
-    // Handle item selection
-    const handleItemPress = useCallback((item) => {
-        onItemSelected === null || onItemSelected === void 0 ? void 0 : onItemSelected(item);
-        hidePopup();
-    }, [onItemSelected, hidePopup]);
-    // Show popup using RootView
-    const showPopup = useCallback(() => {
-        calculatePosition();
-        setIsVisible(true);
-        loadData(searchQueryRef.current);
-        // Wait for position to be calculated
-        setTimeout(() => {
-            const popupComponent = (<TouchableOpacity style={{
-                    flex: 1,
-                    backgroundColor: 'rgba(0, 0, 0, 0.3)',
-                }} activeOpacity={1} onPress={hidePopup}>
-              <View style={{
-                    position: 'absolute',
-                    top: popupPosition.top,
-                    left: popupPosition.left,
-                    width: popupPosition.width,
-                    height: LIST_HEIGHT,
-                    backgroundColor: theme.colors.background,
-                    borderRadius: 8,
-                    shadowColor: '#000',
-                    shadowOffset: { width: 0, height: 2 },
-                    shadowOpacity: 0.25,
-                    shadowRadius: 3.84,
-                    elevation: 5,
-                }}>
-                {useTextInput && (<RNTextInput ref={textInputRef} style={[
-                        styles.inputStyle,
-                        {
-                            height: 40,
-                            borderBottomWidth: 1,
-                            borderBottomColor: theme.colors.border,
-                            paddingHorizontal: 12,
-                            color: theme.colors.text,
-                        },
-                        inputStyle,
-                    ]} placeholder={placeholder} placeholderTextColor={theme.colors.placeholderText} defaultValue={searchQueryRef.current} onChangeText={handleSearchChange} onSubmitEditing={(e) => {
-                        onSubmitEditing === null || onSubmitEditing === void 0 ? void 0 : onSubmitEditing(e);
-                        Keyboard.dismiss();
-                    }} returnKeyType="done" {...TextInputProps}/>)}
-
-                <PopupList data={data} selectedItem={selectedItem} onItemPress={handleItemPress} renderItem={renderItem} keyExtractor={keyExtractor} theme={theme} rootViewsRef={rootViewsRef} fetchData={fetchData} localSearch={localSearch} pageSize={pageSize} onDataUpdate={handleDataUpdate} selectedItemBackgroundColor={selectedItemBackgroundColor}/>
-              </View>
-            </TouchableOpacity>);
-            addRootView({
-                id: popupId.current,
-                style: {
-                    position: 'absolute',
-                    top: 0,
-                    left: 0,
-                    right: 0,
-                    bottom: 0,
-                },
-                component: popupComponent,
-                useModal: true,
-                onModalClose: hidePopup,
-                centerDisplay: centerDisplay,
-            });
-        }, 100);
-    }, [calculatePosition, loadData, popupPosition, useTextInput, placeholder, theme, inputStyle, TextInputProps, data, selectedItem, renderItem, keyExtractor, centerDisplay, addRootView, hidePopup, handleSearchChange, handleItemPress, LIST_HEIGHT, selectedItemBackgroundColor]);
-    // Handle button press - following project implementation logic
-    const handleButtonPress = useCallback(() => {
-        if (AutoPositionedPopupBtnDisabled)
-            return;
-        console.log('AutoPositionedPopup onPress tag=', tag);
-        console.log('AutoPositionedPopup onPress state.isFocus=', state.isFocus);
-        console.log('AutoPositionedPopup onPress useTextInput=', useTextInput);
-        console.log('AutoPositionedPopup onPress hasAddedRootView.current=', hasAddedRootView.current);
-        console.log('AutoPositionedPopup onPress hasShownRootView.current=', hasShownRootView.current);
-        console.log('AutoPositionedPopup onPress hasTriggeredFocus.current=', hasTriggeredFocus.current);
-        console.log('AutoPositionedPopup onPress state.selectedItem=', state.selectedItem);
-        setState((prevState) => {
-            return Object.assign(Object.assign({}, prevState), { isFocus: true });
-        });
-        if (!hasAddedRootView.current && useTextInput) {
-            // TextInput version: hide first, show after keyboard fully appears
-            hasAddedRootView.current = true;
-            hasShownRootView.current = false;
-            addRootView({
-                id: tag,
-                style: {
-                    top: 0,
-                    left: 0,
-                    width: popUpViewStyle === null || popUpViewStyle === void 0 ? void 0 : popUpViewStyle.width,
-                    height: listLayout.height,
-                    opacity: 0,
-                },
-                component: (<PopupList data={data} selectedItem={state.selectedItem} onItemPress={handleItemPress} renderItem={renderItem} keyExtractor={keyExtractor} theme={theme} rootViewsRef={rootViewsRef} fetchData={fetchData} localSearch={localSearch} pageSize={pageSize} onDataUpdate={handleDataUpdate} selectedItemBackgroundColor={selectedItemBackgroundColor}/>),
-                useModal: false,
-            });
-        }
-    }, [AutoPositionedPopupBtnDisabled, useTextInput, state.isFocus, state.selectedItem, tag, hasAddedRootView, hasShownRootView, hasTriggeredFocus, addRootView, popUpViewStyle, data, handleItemPress, renderItem, keyExtractor, theme, rootViewsRef, fetchData, localSearch, pageSize, handleDataUpdate, selectedItemBackgroundColor]);
-    // Imperative handle for parent component access
-    useImperativeHandle(parentRef, () => ({
-        clearSelectedItem: () => {
-            // Clear selection logic can be implemented here
-            console.log('Clearing selected item for:', tag);
-        },
-        showPopup,
-        hidePopup,
-    }), [tag, showPopup, hidePopup]);
-    // Component lifecycle management like project implementation
-    useEffect(() => {
-        console.log(`AutoPositionedPopup componentDidMount tag=`, tag);
-        //componentWillUnmount
-        return () => {
-            console.log(`AutoPositionedPopup componentWillUnmount tag=`, tag);
-            removeRootView(tag, forceRemoveAllRootViewOnItemSelected, rootViewsRef.current);
-            setContextSearchQuery('');
-            if (textInputRef.current) {
-                textInputRef.current.blur();
-                hasTriggeredFocus.current = false;
-                hasAddedRootView.current = false;
-                hasShownRootView.current = false;
-            }
-        };
-    }, [tag, removeRootView, forceRemoveAllRootViewOnItemSelected, setContextSearchQuery]);
-    // Cleanup debounce timer
-    useEffect(() => {
-        return () => {
-            if (debounceTimerRef.current) {
-                clearTimeout(debounceTimerRef.current);
-            }
-        };
-    }, []);
     useEffect(() => {
         var _a, _b;
         console.log('AutoPositionedPopup useEffect tag=', tag);
@@ -391,21 +293,24 @@ const AutoPositionedPopup = memo(forwardRef((props, parentRef) => {
         if (useTextInput) {
             if (isKeyboardFullyShown && hasAddedRootView.current && !hasShownRootView.current && state.isFocus) {
                 (_a = refAutoPositionedPopup.current) === null || _a === void 0 ? void 0 : _a.measureInWindow((x, y, width, height) => {
+                    var _a;
                     console.log('AutoPositionedPopup measureInWindow x=', x, ' y=', y, ' width=', width, ' height=', height);
-                    // Get the full screen height (including the status bar and navigation bar)
+                    // SIMPLE CENTER-BASED POSITIONING STRATEGY
                     const screenHeight = Dimensions.get('screen').height;
-                    console.log('AutoPositionedPopup screenHeight=', screenHeight);
-                    if (y + height < screenHeight / 2 - listLayout.height / 2) {
-                        console.log('AutoPositionedPopup y + height < screenHeight / 2');
-                        ref_listPos.current = { x: x, y: y + height, width: width };
+                    const screenCenter = screenHeight / 2;
+                    console.log('AutoPositionedPopup screenHeight=', screenHeight, ' screenCenter=', screenCenter, ' componentY=', y);
+                    // Simple rule: if component Y > screen center, show popup above; otherwise show below
+                    if (y > screenCenter) {
+                        console.log('AutoPositionedPopup with keyboard: showing above (Y > center)');
+                        ref_listPos.current = { x: x, y: y - listLayout.height, width: width };
                     }
                     else {
-                        console.log('AutoPositionedPopup y + height >= screenHeight / 2');
-                        ref_listPos.current = { x: x, y: y - listLayout.height, width: width };
+                        console.log('AutoPositionedPopup with keyboard: showing below (Y <= center)');
+                        ref_listPos.current = { x: x, y: y + height, width: width };
                     }
                     console.log('AutoPositionedPopup ref_listPos.current=', ref_listPos.current);
                     setRootViewNativeStyle(tag, {
-                        top: ref_listPos.current.y,
+                        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,
@@ -420,7 +325,7 @@ const AutoPositionedPopup = memo(forwardRef((props, parentRef) => {
                 setState((prevState) => {
                     return Object.assign(Object.assign({}, prevState), { isFocus: false });
                 });
-                setContextSearchQuery('');
+                setSearchQuery('');
                 hasAddedRootView.current = false;
                 hasShownRootView.current = false;
             }
@@ -429,43 +334,81 @@ const AutoPositionedPopup = memo(forwardRef((props, parentRef) => {
             if (state.isFocus) {
                 (_b = refAutoPositionedPopup.current) === null || _b === void 0 ? void 0 : _b.measureInWindow((x, y, width, height) => {
                     console.log('AutoPositionedPopup measureInWindow x=', x, ' y=', y, ' width=', width, ' height=', height);
-                    // Get the full screen height (including the status bar and navigation bar)
+                    // SIMPLE CENTER-BASED POSITIONING STRATEGY
                     const screenHeight = Dimensions.get('screen').height;
-                    console.log('AutoPositionedPopup screenHeight=', screenHeight);
-                    if (y + height < screenHeight / 2 - listLayout.height / 2) {
-                        console.log('AutoPositionedPopup y + height < screenHeight / 2');
-                        ref_listPos.current = { x: x, y: y + height, width: width };
+                    const screenCenter = screenHeight / 2;
+                    console.log('AutoPositionedPopup screenHeight=', screenHeight, ' screenCenter=', screenCenter, ' componentY=', y);
+                    // Simple rule: if component Y > screen center, show popup above; otherwise show below
+                    if (y + insets.top > screenCenter) {
+                        console.log('AutoPositionedPopup: showing above (Y > center)');
+                        ref_listPos.current = { x: x, y: y - listLayout.height, width: width };
                     }
                     else {
-                        console.log('AutoPositionedPopup y + height >= screenHeight / 2');
-                        ref_listPos.current = { x: x, y: y - listLayout.height, width: width };
+                        console.log('AutoPositionedPopup: showing below (Y <= center)');
+                        ref_listPos.current = { x: x, y: y + height + insets.top, width: width };
                     }
                     console.log('AutoPositionedPopup ref_listPos.current=', ref_listPos.current);
-                    console.log('AutoPositionedPopup 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: (<PopupList data={data} selectedItem={state.selectedItem} onItemPress={handleItemPress} renderItem={renderItem} keyExtractor={keyExtractor} theme={theme} rootViewsRef={rootViewsRef} fetchData={fetchData} localSearch={localSearch} pageSize={pageSize} onDataUpdate={handleDataUpdate} selectedItemBackgroundColor={selectedItemBackgroundColor}/>),
-                        useModal: true,
-                        onModalClose: () => {
-                            console.log('AutoPositionedPopup onModalClose tag=', tag);
-                            removeRootView(tag, forceRemoveAllRootViewOnItemSelected, rootViewsRef.current);
-                            setState((prevState) => {
-                                return Object.assign(Object.assign({}, prevState), { isFocus: false });
-                            });
-                            hasAddedRootView.current = false;
-                            hasShownRootView.current = false;
-                            hasTriggeredFocus.current = false;
-                            setContextSearchQuery('');
-                        },
-                        centerDisplay,
-                    });
+                    if (CustomPopView && CustomPopViewStyle) {
+                        console.log('AutoPositionedPopup CustomPopViewStyle=', CustomPopViewStyle);
+                        // Ensure CustomPopViewStyle.height is a number before using it in calculations
+                        const customHeight = typeof CustomPopViewStyle.height === 'number' ? CustomPopViewStyle.height : listLayout.height;
+                        // Apply same simple center-based strategy for CustomPopView
+                        console.log('AutoPositionedPopup CustomPopView using center-based positioning, customHeight=', customHeight);
+                        // Simple rule: if component Y > screen center, show popup above; otherwise show below
+                        if (y > screenCenter) {
+                            console.log('AutoPositionedPopup CustomPopView: showing above (Y > center), tag=', tag);
+                            ref_listPos.current = { x: x, y: y - customHeight, width: width };
+                        }
+                        else {
+                            console.log('AutoPositionedPopup CustomPopView: showing below (Y <= center), tag=', tag);
+                            ref_listPos.current = { x: x, y: y + height, width: width };
+                        }
+                        const PopViewComponent = CustomPopView();
+                        console.log('AutoPositionedPopup addRootView PopViewComponent=', PopViewComponent);
+                        console.log('AutoPositionedPopup addRootView state.selectedItem=', state.selectedItem);
+                        addRootView({
+                            id: tag,
+                            style: !centerDisplay
+                                ? Object.assign({ top: ref_listPos.current.y, left: popUpViewStyle === null || popUpViewStyle === void 0 ? void 0 : popUpViewStyle.left, width: popUpViewStyle === null || popUpViewStyle === void 0 ? void 0 : popUpViewStyle.width, height: listLayout.height, opacity: 1 }, CustomPopViewStyle) : Object.assign({ width: popUpViewStyle === null || popUpViewStyle === void 0 ? void 0 : popUpViewStyle.width, height: listLayout.height }, CustomPopViewStyle),
+                            component: <PopViewComponent selectedItem={state.selectedItem}></PopViewComponent>,
+                            useModal: true,
+                            onModalClose: () => {
+                                console.log('AutoPositionedPopup onModalClose');
+                                removeRootView(tag, forceRemoveAllRootViewOnItemSelected, rootViewsRef.current);
+                                setState((prevState) => {
+                                    return Object.assign(Object.assign({}, prevState), { isFocus: false });
+                                });
+                                hasAddedRootView.current = false;
+                                hasShownRootView.current = false;
+                                hasTriggeredFocus.current = false;
+                                setSearchQuery('');
+                            },
+                            centerDisplay,
+                        });
+                    }
+                    else {
+                        console.log('AutoPositionedPopup 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}/>),
+                            useModal: true,
+                            onModalClose: () => {
+                                console.log('AutoPositionedPopup onModalClose tag=', tag);
+                                removeRootView(tag, forceRemoveAllRootViewOnItemSelected, rootViewsRef.current);
+                                setState((prevState) => {
+                                    return Object.assign({}, prevState);
+                                });
+                                setSearchQuery('');
+                            },
+                        });
+                    }
                 });
             }
         }
@@ -473,46 +416,82 @@ const AutoPositionedPopup = memo(forwardRef((props, parentRef) => {
             ref_isFocus.current = state.isFocus;
             if (isKeyboardFullyShown !== keyboardVisibleRef.current) {
                 keyboardVisibleRef.current = isKeyboardFullyShown;
-                // Ensure TextInput has correct focus when keyboard is fully shown
                 if (isKeyboardFullyShown && textInputRef.current) {
-                    // Force ensure TextInput displays correct value
-                    if (searchQueryRef.current) {
-                        textInputRef.current.setNativeProps({ text: searchQueryRef.current });
+                    if (ref_searchQuery.current) {
+                        textInputRef.current.setNativeProps({ text: ref_searchQuery.current });
                     }
                 }
             }
         }
-    }, [
+    }, [insets,
         isKeyboardFullyShown,
         state.isFocus,
         useTextInput,
+        CustomPopView,
+        CustomPopViewStyle,
         forceRemoveAllRootViewOnItemSelected,
         tag,
         state.selectedItem,
-        popUpViewStyle,
-        data,
-        handleItemPress,
-        renderItem,
-        keyExtractor,
-        theme,
-        rootViewsRef,
-        fetchData,
-        localSearch,
-        pageSize,
-        handleDataUpdate,
-        selectedItemBackgroundColor,
-        removeRootView,
-        setContextSearchQuery,
-        addRootView,
-        centerDisplay,
-        setRootViewNativeStyle,
     ]);
+    // Imperative handle for parent component access
+    useImperativeHandle(parentRef, () => ({
+        clearSelectedItem: () => {
+            console.log('AutoPositionedPopup clearSelectedItem tag=', tag);
+            setState((prevState) => {
+                return Object.assign(Object.assign({}, prevState), { selectedItem: undefined });
+            });
+        },
+    }), []);
+    const updateState = (key, value) => {
+        console.log('AutoPositionedPopup updateState key=', key, ' value=', 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);
+            removeRootView(tag, forceRemoveAllRootViewOnItemSelected, rootViewsRef.current);
+            hasAddedRootView.current = false;
+            hasShownRootView.current = false;
+            hasTriggeredFocus.current = false;
+            setState((prevState) => {
+                return Object.assign(Object.assign({}, prevState), { isFocus: false });
+            });
+            setSearchQuery('');
+        }
+    };
     // Render the component following project implementation
     return useMemo(() => {
         var _a;
+        console.log('AutoPositionedPopup render tag=', tag); // Now safe - circular dependency fixed
         return (<CustomRow>
             <View style={[styles.contain, style]} ref={refAutoPositionedPopup}>
-              {!state.isFocus || !useTextInput ? (<TouchableOpacity style={[styles.AutoPositionedPopupBtn, AutoPositionedPopupBtnStyle]} disabled={AutoPositionedPopupBtnDisabled} onPress={handleButtonPress}>
+              {!state.isFocus || !useTextInput ? (<TouchableOpacity style={[styles.AutoPositionedPopupBtn, AutoPositionedPopupBtnStyle]} disabled={AutoPositionedPopupBtnDisabled} onPress={() => {
+                    console.log('AutoPositionedPopup onPress tag=', tag);
+                    console.log('AutoPositionedPopup onPress state.isFocus=', state.isFocus);
+                    console.log('AutoPositionedPopup onPress useTextInput=', useTextInput);
+                    console.log('AutoPositionedPopup onPress hasAddedRootView.current=', hasAddedRootView.current);
+                    console.log('AutoPositionedPopup onPress hasShownRootView.current=', hasShownRootView.current);
+                    console.log('AutoPositionedPopup onPress hasTriggeredFocus.current=', hasTriggeredFocus.current);
+                    console.log('AutoPositionedPopup onPress state.selectedItem=', state.selectedItem);
+                    setState((prevState) => {
+                        return Object.assign(Object.assign({}, prevState), { isFocus: true });
+                    });
+                    if (!hasAddedRootView.current && useTextInput) {
+                        hasAddedRootView.current = true;
+                        hasShownRootView.current = false;
+                        addRootView({
+                            id: tag,
+                            style: {
+                                top: 0,
+                                left: 0,
+                                width: popUpViewStyle === null || popUpViewStyle === void 0 ? void 0 : popUpViewStyle.width,
+                                height: listLayout.height,
+                                opacity: 0,
+                            },
+                            component: (<AutoPositionedPopupList tag={tag} updateState={updateState} fetchData={fetchData} pageSize={pageSize} renderItem={renderItem} selectedItem={state.selectedItem} localSearch={localSearch}/>),
+                            useModal: false,
+                        });
+                    }
+                }}>
                   {!btwChildren ? (<Text style={[
                         styles.searchQueryTxt,
                         state.selectedItem && { color: theme.colors.text },
@@ -523,18 +502,84 @@ const AutoPositionedPopup = memo(forwardRef((props, parentRef) => {
                 </TouchableOpacity>) : (useTextInput &&
                 state.isFocus && (<RNTextInput ref={textInputRef} key="fixed-textinput-key" style={[
                     styles.inputStyle,
-                    {
-                        textAlignVertical: 'center',
-                        paddingVertical: 0,
-                        paddingHorizontal: 0,
-                    },
                     inputStyle,
-                ]} textAlign={TextInputProps['textAlign'] || 'left'} multiline={TextInputProps['multiline'] || false} numberOfLines={TextInputProps['numberOfLines'] || 1} placeholder={placeholder} placeholderTextColor={theme.colors.placeholderText} defaultValue={searchQueryRef.current} onChangeText={handleSearchChange} onSubmitEditing={(e) => {
-                    onSubmitEditing === null || onSubmitEditing === void 0 ? void 0 : onSubmitEditing(e);
+                ]} textAlign={TextInputProps['textAlign'] || 'left'} multiline={TextInputProps['multiline'] || false} numberOfLines={TextInputProps['numberOfLines'] || 1} onChangeText={(searchQuery) => {
+                    ref_searchQuery.current = searchQuery;
+                    console.log('AutoPositionedPopup onChangeText rootViews=', rootViews);
+                    if (!localSearch) {
+                        if (debounceTimerRef.current) {
+                            clearTimeout(debounceTimerRef.current);
+                        }
+                        debounceTimerRef.current = setTimeout(() => {
+                            emitQueryChange(ref_searchQuery.current);
+                        }, 500);
+                    }
+                    else {
+                        emitQueryChange(ref_searchQuery.current);
+                    }
+                }} placeholderTextColor={theme.colors.placeholderText} placeholder={placeholder} onKeyPress={(e) => {
+                    if (e.nativeEvent.key === 'Enter') {
+                        Keyboard.dismiss();
+                    }
+                }} keyboardType={TextInputProps['keyboardType'] || 'default'} clearButtonMode="while-editing" returnKeyType={TextInputProps['returnKeyType'] || 'done'} maxLength={TextInputProps['maxLength'] || 100} accessibilityLabel="selectInput" accessible={true} autoFocus={TextInputProps['autoFocus'] || false} autoCorrect={false} underlineColorAndroid="transparent" editable={TextInputProps['editable'] || true} secureTextEntry={TextInputProps['secureTextEntry'] || false} defaultValue="" caretHidden={false} enablesReturnKeyAutomatically onFocus={() => {
+                    console.log('AutoPositionedPopup onFocus tag=', tag, ' selectedItem=', state.selectedItem, ' hasTriggeredFocus.current=', hasTriggeredFocus.current, ' textInputRef.current=', textInputRef.current, ' ref_searchQuery.current=', ref_searchQuery.current);
+                    if (!hasTriggeredFocus.current) {
+                        hasTriggeredFocus.current = true;
+                        ref_isFocus.current = true;
+                        if (state.selectedItem) {
+                            ref_searchQuery.current = state.selectedItem.title;
+                        }
+                        if (textInputRef.current && ref_searchQuery.current) {
+                            textInputRef.current.setNativeProps({
+                                text: ref_searchQuery.current,
+                            });
+                        }
+                    }
+                }} onBlur={() => {
+                    console.log('AutoPositionedPopup onBlur tag=', tag, 'textInputRef.current=', textInputRef.current);
+                    hasTriggeredFocus.current = false;
+                    hasAddedRootView.current = false; // 重置 RootView 狀態
+                    hasShownRootView.current = false;
+                    ref_isFocus.current = false;
+                    setState((prevState) => {
+                        return Object.assign(Object.assign({}, prevState), { isFocus: false });
+                    });
+                    removeRootView(tag, forceRemoveAllRootViewOnItemSelected);
+                    setSearchQuery('');
+                    if (textInputRef.current) {
+                        textInputRef.current.setNativeProps({ text: '' });
+                        ref_searchQuery.current = '';
+                        textInputRef.current.blur();
+                    }
                     Keyboard.dismiss();
-                }} returnKeyType="done" {...TextInputProps}/>))}
+                }} selectTextOnFocus={TextInputProps['selectTextOnFocus'] || false} onSubmitEditing={(e) => {
+                    console.log('AutoPositionedPopup.tsx onSubmitEditing e.nativeEvent.text=', e.nativeEvent.text);
+                    onSubmitEditing && onSubmitEditing(e);
+                }}/>))}
             </View>
           </CustomRow>);
-    }, [state.isFocus, useTextInput, AutoPositionedPopupBtnStyle, AutoPositionedPopupBtnDisabled, handleButtonPress, btwChildren, state.selectedItem, theme.colors.text, labelStyle, placeholder, textInputRef, inputStyle, TextInputProps, searchQueryRef, handleSearchChange, onSubmitEditing, style, refAutoPositionedPopup]);
+    }, [tag,
+        fetchData,
+        renderItem,
+        onItemSelected,
+        onSubmitEditing,
+        localSearch,
+        placeholder,
+        textAlign,
+        pageSize,
+        selectedItem,
+        CustomRow,
+        useTextInput,
+        btwChildren,
+        selectedItem,
+        keyExtractor,
+        AutoPositionedPopupBtnStyle,
+        CustomPopView,
+        CustomPopViewStyle,
+        forceRemoveAllRootViewOnItemSelected,
+        inputStyle,
+        TextInputProps,
+        state.isFocus,]);
 }));
 export default AutoPositionedPopup;
+//# sourceMappingURL=AutoPositionedPopup.js.map