react-native-auto-positioned-popup 1.0.4 → 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,281 +31,555 @@ 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 = {
+    height: 200,
+};
 // Main AutoPositionedPopup component
 const AutoPositionedPopup = memo(forwardRef((props, parentRef) => {
-    const { tag, style, AutoPositionedPopupBtnStyle, placeholder = 'Please Select', textAlign = 'right', 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;
+    console.log('AutoPositionedPopup props=', 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, searchQuery: contextSearchQuery, setSearchQuery: setContextSearchQuery } = useRootView();
+    const { addRootView, setRootViewNativeStyle, removeRootView, rootViews, setSearchQuery } = useRootView();
+    const insets = useSafeAreaInsets();
     const rootViewsRef = useRef(rootViews);
-    useEffect(() => {
-        rootViewsRef.current = rootViews;
-    }, [rootViews]);
-    // State management
+    // Track TextInput focus and RootView states like project implementation
+    const hasTriggeredFocus = useRef(false);
+    const hasAddedRootView = useRef(false);
+    const hasShownRootView = useRef(false);
+    // Additional refs for keyboard and position tracking
+    const ref_isFocus = useRef();
+    const ref_isKeyboardFullyShown = useRef();
+    const ref_listPos = useRef();
+    const keyboardVisibleRef = useRef(false);
+    const refAutoPositionedPopup = useRef(null);
+    const ref_searchQuery = useRef('');
+    // Simple keyboard status tracking (alternative to useKeyboardStatus hook)
+    // 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;
+    // Refs to store latest values for useEffect without adding to dependency array
+    const dataRef = useRef(data);
+    const isKeyboardFullyShown = useKeyboardStatus();
     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);
+    /**
+     * componentDidMount && componentWillUnmount
+     */
+    useEffect(() => {
+        (async () => {
+        })();
+        console.log(`AutoPositionedPopup componentDidMount tag=`, tag);
+        console.log('AutoPositionedPopup componentDidMount CustomPopView=', CustomPopView);
+        //componentWillUnmount
+        return () => {
+            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;
             }
-        }
-        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
+    useEffect(() => {
+        console.log('AutoPositionedPopup rootViews=', rootViews);
+        rootViewsRef.current = rootViews;
+        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 });
+            });
         }
-        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,
+    }, [rootViews]);
+    useEffect(() => {
+        var _a, _b;
+        console.log('AutoPositionedPopup useEffect tag=', tag);
+        console.log('AutoPositionedPopup useEffect selectedItem=', selectedItem);
+        console.log('AutoPositionedPopup useEffect state.selectedItem=', state.selectedItem);
+        if (((_a = state.selectedItem) === null || _a === void 0 ? void 0 : _a.id) !== (selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.id) || ((_b = state.selectedItem) === null || _b === void 0 ? void 0 : _b.title) !== (selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.title)) {
+            console.log('AutoPositionedPopup useEffect selectedItem!=state.selectedItem');
+            setState((prevState) => {
+                return Object.assign(Object.assign({}, prevState), { selectedItem: selectedItem });
             });
-        }, 100);
-    }, [calculatePosition, loadData, popupPosition, useTextInput, placeholder, theme, inputStyle, TextInputProps, data, selectedItem, renderItem, keyExtractor, centerDisplay, addRootView, hidePopup, handleSearchChange, handleItemPress, LIST_HEIGHT, selectedItemBackgroundColor]);
-    // Handle button press
-    const handleButtonPress = useCallback(() => {
-        if (AutoPositionedPopupBtnDisabled)
-            return;
+        }
+    }, [selectedItem, state.selectedItem, tag]);
+    useEffect(() => {
+        var _a, _b;
+        console.log('AutoPositionedPopup useEffect tag=', tag);
+        console.log('AutoPositionedPopup useEffect state.isFocus=', state.isFocus);
+        console.log('AutoPositionedPopup useEffect isKeyboardFullyShown=', isKeyboardFullyShown);
+        console.log('AutoPositionedPopup useEffect ref_isFocus.current=', ref_isFocus.current);
+        console.log('AutoPositionedPopup useEffect ref_isKeyboardFullyShown.current=', ref_isKeyboardFullyShown.current);
+        console.log('AutoPositionedPopup useEffect useTextInput=', useTextInput);
+        console.log('AutoPositionedPopup useEffect TextInputProps=', TextInputProps);
+        console.log('AutoPositionedPopup useEffect hasAddedRootView.current=', hasAddedRootView.current);
+        console.log('AutoPositionedPopup useEffect hasShownRootView.current=', hasShownRootView.current);
         if (useTextInput) {
-            showPopup();
-            // Focus text input after a short delay
-            setTimeout(() => {
-                var _a;
-                (_a = textInputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
-            }, 100);
+            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);
+                    // SIMPLE CENTER-BASED POSITIONING STRATEGY
+                    const screenHeight = Dimensions.get('screen').height;
+                    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 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: (_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;
+                });
+            }
+            else if (!isKeyboardFullyShown && ref_isFocus.current) {
+                console.log('AutoPositionedPopup isKeyboardFullyShown useEffect removeRootView tag=', tag, ' forceRemoveAllRootViewOnItemSelected=', forceRemoveAllRootViewOnItemSelected);
+                removeRootView(tag, forceRemoveAllRootViewOnItemSelected);
+                setState((prevState) => {
+                    return Object.assign(Object.assign({}, prevState), { isFocus: false });
+                });
+                setSearchQuery('');
+                hasAddedRootView.current = false;
+                hasShownRootView.current = false;
+            }
         }
         else {
-            showPopup();
+            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);
+                    // SIMPLE CENTER-BASED POSITIONING STRATEGY
+                    const screenHeight = Dimensions.get('screen').height;
+                    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: 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);
+                    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('');
+                            },
+                        });
+                    }
+                });
+            }
+        }
+        if (isKeyboardFullyShown) {
+            ref_isFocus.current = state.isFocus;
+            if (isKeyboardFullyShown !== keyboardVisibleRef.current) {
+                keyboardVisibleRef.current = isKeyboardFullyShown;
+                if (isKeyboardFullyShown && textInputRef.current) {
+                    if (ref_searchQuery.current) {
+                        textInputRef.current.setNativeProps({ text: ref_searchQuery.current });
+                    }
+                }
+            }
         }
-    }, [AutoPositionedPopupBtnDisabled, useTextInput, showPopup]);
+    }, [insets,
+        isKeyboardFullyShown,
+        state.isFocus,
+        useTextInput,
+        CustomPopView,
+        CustomPopViewStyle,
+        forceRemoveAllRootViewOnItemSelected,
+        tag,
+        state.selectedItem,
+    ]);
     // Imperative handle for parent component access
     useImperativeHandle(parentRef, () => ({
         clearSelectedItem: () => {
-            // Clear selection logic can be implemented here
-            console.log('Clearing selected item for:', tag);
+            console.log('AutoPositionedPopup clearSelectedItem tag=', tag);
+            setState((prevState) => {
+                return Object.assign(Object.assign({}, prevState), { selectedItem: undefined });
+            });
         },
-        showPopup,
-        hidePopup,
-    }), [tag, showPopup, hidePopup]);
-    // Cleanup
-    useEffect(() => {
-        return () => {
-            if (debounceTimerRef.current) {
-                clearTimeout(debounceTimerRef.current);
-            }
-        };
-    }, []);
-    // Render the component
-    return (<CustomRow>
-          <View style={[styles.contain, style]} ref={containerRef}>
-            <TouchableOpacity style={[styles.AutoPositionedPopupBtn, AutoPositionedPopupBtnStyle]} disabled={AutoPositionedPopupBtnDisabled} onPress={handleButtonPress}>
-              {btwChildren ? (btwChildren()) : (<Text style={[
-                styles.searchQueryTxt,
-                selectedItem && { color: theme.colors.text },
-                labelStyle,
-            ]} numberOfLines={1} ellipsizeMode="tail">
-                  {(selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.title) || placeholder}
-                </Text>)}
-            </TouchableOpacity>
-          </View>
-        </CustomRow>);
+    }), []);
+    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={() => {
+                    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 },
+                        labelStyle,
+                    ]} numberOfLines={1} ellipsizeMode={'tail'}>
+                      {((_a = state.selectedItem) === null || _a === void 0 ? void 0 : _a.title) || placeholder}
+                    </Text>) : (btwChildren())}
+                </TouchableOpacity>) : (useTextInput &&
+                state.isFocus && (<RNTextInput ref={textInputRef} key="fixed-textinput-key" style={[
+                    styles.inputStyle,
+                    inputStyle,
+                ]} 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();
+                }} selectTextOnFocus={TextInputProps['selectTextOnFocus'] || false} onSubmitEditing={(e) => {
+                    console.log('AutoPositionedPopup.tsx onSubmitEditing e.nativeEvent.text=', e.nativeEvent.text);
+                    onSubmitEditing && onSubmitEditing(e);
+                }}/>))}
+            </View>
+          </CustomRow>);
+    }, [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