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

package/src/AutoPositionedPopup.tsx

@@ -3,7 +3,7 @@ import React, {
   forwardRef,
   ForwardRefExoticComponent,
   memo,
-  MemoExoticComponent,
+  MemoExoticComponent, MutableRefObject,
   useCallback,
   useEffect,
   useImperativeHandle,
@@ -19,12 +19,17 @@ import {
   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 {TextInputSubmitEditingEventData} from 'react-native/Libraries/Components/TextInput/TextInput';
-import {NativeSyntheticEvent} from 'react-native/Libraries/Types/CoreEventTypes';
+import {LayoutRectangle, NativeSyntheticEvent} from 'react-native/Libraries/Types/CoreEventTypes';
 import {AutoPositionedPopupProps, Data, SelectedItem} from './AutoPositionedPopupProps';
 import styles from './AutoPositionedPopup.style';
 import {useRootView} from './RootViewContext';
+import {useKeyboardStatus} from './KeyboardManager';
+import {useSafeAreaInsets} from "react-native-safe-area-context";
 
 // Lightweight emitter to decouple TextInput and list without re-rendering context
 type QueryListener = (query: string) => void;
@@ -63,144 +68,227 @@ const defaultTheme: Theme = {
 
 // List item component for rendering individual items
 const ListItem: React.FC<{
+  updateState: (key: string, value: SelectedItem) => void;
   item: SelectedItem;
   index: number;
   selectedItem?: SelectedItem;
-  onItemPress: (item: SelectedItem) => void;
-  theme: Theme;
-  rootViewsRef?: React.MutableRefObject<any[]>;
-  selectedItemBackgroundColor?: string;
-}> = memo(({item, index, selectedItem, onItemPress, theme, rootViewsRef, selectedItemBackgroundColor = 'rgba(116, 116, 128, 0.08)'}) => {
-  const isSelected = item.id === 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]);
-});
+}> = memo(
+  ({
+     updateState,
+     item,
+     index,
+     selectedItem,
+   }: {
+    updateState: (key: string, value: SelectedItem) => void;
+    item: SelectedItem;
+    index: number;
+    selectedItem?: SelectedItem;
+  }): React.JSX.Element => {
+    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?.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]);
+  }
+);
 
 // Popup list component with AdvancedFlatList
-interface PopupListProps {
-  data: SelectedItem[];
-  selectedItem?: SelectedItem;
-  onItemPress: (item: SelectedItem) => void;
+interface AutoPositionedPopupListProps {
+  tag: string;
+  updateState: (key: string, value: any) => void;
+  fetchData: ({
+                pageIndex,
+                pageSize,
+                searchQuery,
+              }: {
+    pageIndex: number;
+    pageSize: number;
+    searchQuery?: string;
+  }) => Promise<Data | null>;
+  keyExtractor?: (item: SelectedItem) => string; //keyExtractor={item => item?.id}
   renderItem?: ({item, index}: { item: SelectedItem; index: number }) => React.ReactElement;
-  keyExtractor?: (item: SelectedItem) => string;
-  theme: Theme;
-  rootViewsRef?: React.MutableRefObject<any[]>;
-  fetchData?: (params: { pageIndex: number; pageSize: number; searchQuery?: string }) => Promise<Data | null>;
+  selectedItem?: SelectedItem;
   localSearch?: boolean;
   pageSize?: number;
-  onDataUpdate?: (newData: SelectedItem[]) => void;
-  selectedItemBackgroundColor?: string;
 }
 
-const PopupList: React.FC<PopupListProps> = memo(({
-                                                    data,
-                                                    selectedItem,
-                                                    onItemPress,
-                                                    renderItem,
-                                                    keyExtractor = (item: SelectedItem) => String(item.id),
-                                                    theme,
-                                                    rootViewsRef,
-                                                    fetchData,
-                                                    localSearch = false,
-                                                    pageSize = 20,
-                                                    onDataUpdate,
-                                                    selectedItemBackgroundColor,
-                                                  }) => {
-  const [internalData, setInternalData] = useState<SelectedItem[]>(data);
-  const searchQueryRef = useRef<string>('');
-
-  // Sync external data changes
-  useEffect(() => {
-    setInternalData(data);
-  }, [data]);
-
-  // Listen to search query changes
-  useEffect(() => {
-    const unsubscribe = subscribeQueryChange(async (newQuery: string) => {
-      console.log('PopupList subscribeQueryChange newQuery=', newQuery);
-      searchQueryRef.current = newQuery;
-
-      if (fetchData) {
-        try {
-          const result = await fetchData({
-            pageIndex: 0,
-            pageSize,
-            searchQuery: newQuery,
+const AutoPositionedPopupList: React.FC<AutoPositionedPopupListProps> = memo(
+  ({
+     tag,
+     updateState,
+     fetchData,
+     keyExtractor = (item) => String(item.id),
+     renderItem,
+     selectedItem,
+     localSearch,
+     pageSize,
+   }: AutoPositionedPopupListProps): React.JSX.Element => {
+    const [state, setState] = useState<{
+      selectedItem?: SelectedItem;
+      localData: SelectedItem[];
+    }>({
+      selectedItem: selectedItem,
+      localData: [],
+    });
+    // Define an interface that matches the methods we need from CsxFlatList
+    const ref_list = useRef<{ scrollToTop: () => void; refresh: () => void } | null>(null);
+    const ref_searchQuery = useRef<string>('');
+    const {searchQuery, setSearchQuery, rootViews} = useRootView();
+    const rootViewsRef = useRef(rootViews);
+    useEffect(() => {
+      rootViewsRef.current = rootViews;
+    }, [rootViews]);
+    /**
+     * componentDidMount && componentWillUnmount
+     */
+    useEffect(() => {
+      (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: string) => {
+        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;
+    }, []);
+    const _updateState = (key: string, value: SelectedItem) => {
+      console.log('AutoPositionedPopupList _updateState key=', key, ' value=', value);
+      setState((prevState) => ({
+        ...prevState,
+        [key]: value,
+      }));
+      console.log('AutoPositionedPopupList _updateState rootViews=', rootViewsRef.current);
+      updateState(key, value);
+    };
+    const _fetchData = async ({
+                                pageIndex,
+                                pageSize: currentPageSize,
+                              }: {
+      pageIndex: number;
+      pageSize: number;
+    }): Promise<Data | null> => {
+      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: SelectedItem[] = state.localData.filter((item: SelectedItem) => {
+          return item.title?.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: Data | null = await fetchData({
+          pageIndex,
+          pageSize: pageSize || 10,
+          searchQuery: ref_searchQuery.current,
+        });
+        console.log('AutoPositionedPopupList _fetchData res=', res);
+        if (res?.items && localSearch) {
+          setState((prevState) => {
+            return {
+              ...prevState,
+              localData: res.items,
+            };
           });
-
-          if (result?.items) {
-            setInternalData(result.items);
-            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?.(filtered);
+        return Promise.resolve(res);
+      } catch (e) {
+        console.warn('Error in fetchData:', e);
       }
-    });
-
-    return unsubscribe;
-  }, [fetchData, localSearch, pageSize, data, onDataUpdate]);
-  const defaultRenderItem = useCallback(
-    ({item, index}: { item: SelectedItem; index: number }) => (
-      <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>
-  );
-});
+      console.log('AutoPositionedPopupList _fetchData res=', null);
+      return null;
+    };
+    const _renderItem = useCallback(
+      ({item, index}: { item: SelectedItem; index: number }) => {
+        return <ListItem item={item} index={index} updateState={_updateState} selectedItem={state.selectedItem} />;
+      },
+      [state.selectedItem]
+    );
+    return useMemo(() => {
+      console.log('AutoPositionedPopupList (global as any)?.$fake=', (global as any)?.$fake);
+      // Choose AdvancedFlatList version based on global.$fake
+      const AdvancedFlatListComponent = (global as any)?.$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,
+    ]);
+  }
+);
 
 // State interface for AutoPositionedPopup
 interface StateProps {
@@ -230,7 +318,30 @@ const AutoPositionedPopup: MemoExoticComponent<
         inputStyle,
         labelStyle,
         popUpViewStyle = {left: '5%', width: '90%'},
-        fetchData,
+        fetchData = async ({
+                             pageIndex,
+                             pageSize,
+                             searchQuery,
+                           }: {
+          pageIndex: number;
+          pageSize: number;
+          searchQuery?: string;
+        }): Promise<Data | null> => {
+          const res = {
+            items: [] as any[],
+            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,
@@ -239,60 +350,83 @@ const AutoPositionedPopup: MemoExoticComponent<
         useTextInput = false,
         btwChildren,
         CustomRow = ({children}) => <View>{children}</View>,
-        keyExtractor = (item: any) => item?.id,
+        keyExtractor = (item: any) => String(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<StateProps>({
         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);
       const hasAddedRootView = useRef(false);
       const hasShownRootView = useRef(false);
-
       // Additional refs for keyboard and position tracking
       const ref_isFocus = useRef<boolean>();
       const ref_isKeyboardFullyShown = useRef<boolean>();
-      const ref_listPos = useRef<any>();
+      const ref_listPos: MutableRefObject<any> = useRef<LayoutRectangle>()
       const keyboardVisibleRef = useRef(false);
       const refAutoPositionedPopup = useRef<View>(null);
-
+      const ref_searchQuery = useRef<string>('');
       // 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<SelectedItem[]>([]);
+      const [loading, setLoading] = useState(false);
+      const [popupPosition, setPopupPosition] = useState<{
+        top: number;
+        left: number;
+        width: number;
+      }>({top: 0, left: 0, width: 0});
+      // Refs for performance optimization
+      const containerRef = useRef<View>(null);
+      const textInputRef = useRef<RNTextInput>(null);
+      const debounceTimerRef = useRef<NodeJS.Timeout | null>(null);
+      const searchQueryRef = useRef<string>(''); // Use ref instead of state to avoid re-renders
+      // Refs to store latest values for useEffect without adding to dependency array
+      const dataRef = useRef<SelectedItem[]>(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?.remove();
-          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(() => {
         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 {
@@ -302,8 +436,6 @@ const AutoPositionedPopup: MemoExoticComponent<
           });
         }
       }, [rootViews]);
-
-      // Sync selectedItem changes like project implementation
       useEffect(() => {
         console.log('AutoPositionedPopup useEffect tag=', tag);
         console.log('AutoPositionedPopup useEffect selectedItem=', selectedItem);
@@ -318,323 +450,6 @@ const AutoPositionedPopup: MemoExoticComponent<
           });
         }
       }, [selectedItem, state.selectedItem, tag]);
-
-
-      // Legacy state for compatibility
-      const [isVisible, setIsVisible] = useState(false);
-      const [data, setData] = useState<SelectedItem[]>([]);
-      const [loading, setLoading] = useState(false);
-      const [popupPosition, setPopupPosition] = useState<{
-        top: number;
-        left: number;
-        width: number;
-      }>({top: 0, left: 0, width: 0});
-      const popupId = useRef(`popup-${tag}-${Date.now()}`);
-
-      // Refs for performance optimization
-      const containerRef = useRef<View>(null);
-      const textInputRef = useRef<RNTextInput>(null);
-      const debounceTimerRef = useRef<NodeJS.Timeout | null>(null);
-      const searchQueryRef = useRef<string>(''); // 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: string = '') => {
-        if (!fetchData) return;
-
-        setLoading(true);
-        try {
-          const result = await fetchData({
-            pageIndex: 0,
-            pageSize,
-            searchQuery: query,
-          });
-
-          if (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: string) => {
-        // 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?.left && 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(() => {
-        setIsVisible(false);
-        // Reset search query
-        searchQueryRef.current = '';
-        if (textInputRef.current) {
-          textInputRef.current.blur();
-          textInputRef.current.clear?.(); // Clear the TextInput
-        }
-        removeRootView(popupId.current, forceRemoveAllRootViewOnItemSelected, rootViewsRef.current);
-      }, [removeRootView, forceRemoveAllRootViewOnItemSelected]);
-
-      // Handle data updates from PopupList
-      const handleDataUpdate = useCallback((newData: SelectedItem[]) => {
-        setData(newData);
-      }, []);
-
-      // Handle item selection
-      const handleItemPress = useCallback((item: SelectedItem) => {
-        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: NativeSyntheticEvent<TextInputSubmitEditingEventData>) => {
-                      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 {
-            ...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?.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(() => {
         console.log('AutoPositionedPopup useEffect tag=', tag);
         console.log('AutoPositionedPopup useEffect state.isFocus=', state.isFocus);
@@ -648,26 +463,26 @@ const AutoPositionedPopup: MemoExoticComponent<
         console.log('AutoPositionedPopup useEffect TextInputProps=', TextInputProps);
         console.log('AutoPositionedPopup useEffect hasAddedRootView.current=', hasAddedRootView.current);
         console.log('AutoPositionedPopup useEffect hasShownRootView.current=', hasShownRootView.current);
-
         if (useTextInput) {
           if (isKeyboardFullyShown && hasAddedRootView.current && !hasShownRootView.current && state.isFocus) {
             refAutoPositionedPopup.current?.measureInWindow((x: number, y: number, width: number, height: number) => {
               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);
+              const screenCenter = screenHeight / 2;
+              console.log('AutoPositionedPopup screenHeight=', screenHeight, ' screenCenter=', screenCenter, ' componentY=', y);
 
-              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 };
+              // 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: ref_listPos.current?.y,
                 left: popUpViewStyle?.left,
                 width: popUpViewStyle?.width,
                 height: listLayout.height,
@@ -689,7 +504,7 @@ const AutoPositionedPopup: MemoExoticComponent<
                 isFocus: false,
               };
             });
-            setContextSearchQuery('');
+            setSearchQuery('');
             hasAddedRootView.current = false;
             hasShownRootView.current = false;
           }
@@ -697,107 +512,170 @@ const AutoPositionedPopup: MemoExoticComponent<
           if (state.isFocus) {
             refAutoPositionedPopup.current?.measureInWindow((x: number, y: number, width: number, height: number) => {
               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);
+              const screenCenter = screenHeight / 2;
+              console.log('AutoPositionedPopup screenHeight=', screenHeight, ' screenCenter=', screenCenter, ' componentY=', y);
 
-              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 };
+              // 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?.left,
-                  width: 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 {
-                      ...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
+                    ? {
+                      top: ref_listPos.current.y,
+                      left: popUpViewStyle?.left,
+                      width: popUpViewStyle?.width,
+                      height: listLayout.height,
+                      opacity: 1,
+                      ...CustomPopViewStyle,
+                    }
+                    : {width: 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 {
+                        ...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?.left,
+                    width: 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 {
+                        ...prevState,
+                      };
+                    });
+                    setSearchQuery('');
+                  },
+                });
+              }
             });
           }
         }
-
         if (isKeyboardFullyShown) {
           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 {
+                ...prevState,
+                selectedItem: undefined,
+              };
+            });
+          },
+        }),
+        []
+      );
+      const updateState = (key: string, value: SelectedItem) => {
+        console.log('AutoPositionedPopup updateState key=', key, ' value=', value);
+        setState((prevState) => ({
+          ...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 {
+              ...prevState,
+              isFocus: false,
+            };
+          });
+          setSearchQuery('');
+        }
+      };
       // Render the component following project implementation
       return useMemo(() => {
+        console.log('AutoPositionedPopup render tag=', tag); // Now safe - circular dependency fixed
         return (
           <CustomRow>
             <View style={[styles.contain, style]} ref={refAutoPositionedPopup}>
@@ -805,13 +683,62 @@ const AutoPositionedPopup: MemoExoticComponent<
                 <TouchableOpacity
                   style={[styles.AutoPositionedPopupBtn, AutoPositionedPopupBtnStyle]}
                   disabled={AutoPositionedPopupBtnDisabled}
-                  onPress={handleButtonPress}
+                  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 {
+                        ...prevState,
+                        isFocus: true,
+                      };
+                    });
+                    if (!hasAddedRootView.current && useTextInput) {
+                      hasAddedRootView.current = true;
+                      hasShownRootView.current = false;
+                      addRootView({
+                        id: tag,
+                        style: {
+                          top: 0,
+                          left: 0,
+                          width: 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 },
+                        state.selectedItem && {color: theme.colors.text},
                         labelStyle,
                       ]}
                       numberOfLines={1}
@@ -831,33 +758,134 @@ const AutoPositionedPopup: MemoExoticComponent<
                     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}
+                    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}
-                    defaultValue={searchQueryRef.current}
-                    onChangeText={handleSearchChange}
-                    onSubmitEditing={(e: NativeSyntheticEvent<TextInputSubmitEditingEventData>) => {
-                      onSubmitEditing?.(e);
+                    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 {
+                          ...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: NativeSyntheticEvent<TextInputSubmitEditingEventData>) => {
+                      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,]);
     }
   )
 );