react-native-auto-positioned-popup 1.2.19 → 1.2.21

package/src/AutoPositionedPopup.tsx

@@ -3,7 +3,7 @@
 // Wait 1 second for KeyboardAwareScrollView to stabilize, then use measureInWindow to get trigger's FINAL position
 // NOTE: Parent component (KeyboardAwareScrollView) is responsible for scrolling trigger into view
 // DEBUG FLAG: Set to false to disable all console logs for better performance
-const POPUP_DEBUG = false; // DISABLED: Too many logs cause app freeze
+const POPUP_DEBUG = global.$fake; // DISABLED: Too many logs cause app freeze
 const POPUP_POSITION_DEBUG = true; // Only log positioning calculations
 const debugLog = (...args: any[]) => {
   if (POPUP_DEBUG) {
@@ -45,13 +45,13 @@ import {
   UIManager,
   View,
 } from 'react-native';
-import {AdvancedFlatList, ListData, FetchDataParams} from 'react-native-advanced-flatlist';
-import {TextInputSubmitEditingEventData} from 'react-native/Libraries/Components/TextInput/TextInput';
-import {LayoutRectangle, NativeSyntheticEvent} from 'react-native/Libraries/Types/CoreEventTypes';
-import {AutoPositionedPopupProps, Data, SelectedItem} from './AutoPositionedPopupProps';
+import { AdvancedFlatList, ListData, FetchDataParams } from 'react-native-advanced-flatlist';
+import { TextInputSubmitEditingEventData } from 'react-native/Libraries/Components/TextInput/TextInput';
+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 { useRootView } from './RootViewContext';
+import { useKeyboardStatus } from './KeyboardManager';
 
 // Lightweight emitter to decouple TextInput and list without re-rendering context
 type QueryListener = (query: string) => void;
@@ -97,18 +97,18 @@ const ListItem: React.FC<{
   themeMode?: string | null | undefined;
 }> = memo(
   ({
-     updateState,
-     item,
-     index,
-     selectedItem, themeMode
-   }: {
+    updateState,
+    item,
+    index,
+    selectedItem, themeMode
+  }: {
     updateState: (key: string, value: SelectedItem) => void;
     item: SelectedItem;
     index: number;
     selectedItem?: SelectedItem;
     themeMode?: string | null | undefined;
   }): React.JSX.Element => {
-    const {addRootView, setRootViewNativeStyle, removeRootView, rootViews} = useRootView();
+    const { addRootView, setRootViewNativeStyle, removeRootView, rootViews } = useRootView();
     const rootViewsRef = useRef(rootViews);
     useEffect(() => {
       rootViewsRef.current = rootViews;
@@ -121,7 +121,7 @@ const ListItem: React.FC<{
           key={item.id}
           style={[
             styles.commonModalRow,
-            {backgroundColor: isSelected ? (themeMode === 'light' ? 'rgba(116, 116, 128, 0.08)' : 'rgba(120, 120, 128, 0.36)') : 'transparent'},
+            { backgroundColor: isSelected ? (themeMode === 'light' ? 'rgba(116, 116, 128, 0.08)' : 'rgba(120, 120, 128, 0.36)') : 'transparent' },
           ]}
           onPress={() => {
             // debugLog('AutoPositionedPopup.tsx ListItem onPress item=', item); // Commented to prevent spam
@@ -129,9 +129,11 @@ const ListItem: React.FC<{
             updateState('selectedItem', item);
           }}
         >
-          <Text style={(themeMode === 'light' ? styles.ListItemCode : {...styles.ListItemCode, color: '#fff'})} numberOfLines={1} ellipsizeMode="tail">
+          <Text style={(themeMode === 'light' ? styles.ListItemCode : { ...styles.ListItemCode, color: '#fff' })} numberOfLines={1} ellipsizeMode="tail">
             {item.title}
           </Text>
+          {/* 底部分割线 */}
+          {/* <View style={styles.bottomDivider} /> */}
         </TouchableOpacity>
       );
     }, [updateState, item, index, selectedItem, rootViewsRef, themeMode]);
@@ -143,35 +145,36 @@ interface AutoPositionedPopupListProps {
   tag: string;
   updateState: (key: string, value: any) => void;
   fetchData: ({
-                pageIndex,
-                pageSize,
-                searchQuery,
-              }: {
+    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;
+  renderItem?: ({ item, index }: { item: SelectedItem; index: number }) => React.ReactElement;
   selectedItem?: SelectedItem;
   localSearch?: boolean;
   pageSize?: number;
   showListEmptyComponent?: boolean;
   emptyText?: string;
   themeMode?: string | null | undefined;
+  internalSearchTextInput?: React.ReactNode;
 }
 
 const AutoPositionedPopupList: React.FC<AutoPositionedPopupListProps> = memo(
   ({
-     tag,
-     updateState,
-     fetchData,
-     keyExtractor = (item) => String(item.id),
-     renderItem,
-     selectedItem,
-     localSearch,
-     pageSize, showListEmptyComponent, emptyText, themeMode
-   }: AutoPositionedPopupListProps): React.JSX.Element => {
+    tag,
+    updateState,
+    fetchData,
+    keyExtractor = (item) => String(item.id),
+    renderItem,
+    selectedItem,
+    localSearch,
+    pageSize, showListEmptyComponent, emptyText, themeMode, internalSearchTextInput
+  }: AutoPositionedPopupListProps): React.JSX.Element => {
     const [state, setState] = useState<{
       selectedItem?: SelectedItem;
       localData: SelectedItem[];
@@ -182,7 +185,7 @@ const AutoPositionedPopupList: React.FC<AutoPositionedPopupListProps> = memo(
     // 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 { searchQuery, setSearchQuery, rootViews } = useRootView();
     const rootViewsRef = useRef(rootViews);
     useEffect(() => {
       rootViewsRef.current = rootViews;
@@ -221,10 +224,10 @@ const AutoPositionedPopupList: React.FC<AutoPositionedPopupListProps> = memo(
       updateState(key, value);
     };
     const _fetchData = async ({
-                                pageIndex,
-                                pageSize: currentPageSize,
-                              }: FetchDataParams): Promise<ListData | null> => {
-      debugLog('AutoPositionedPopupList _fetchData=', {pageIndex, pageSize: currentPageSize, 'state.localData': state.localData, 'ref_searchQuery.current': ref_searchQuery.current, localSearch});
+      pageIndex,
+      pageSize: currentPageSize,
+    }: FetchDataParams): Promise<ListData | null> => {
+      debugLog('AutoPositionedPopupList _fetchData=', { pageIndex, pageSize: currentPageSize, 'state.localData': state.localData, 'ref_searchQuery.current': ref_searchQuery.current, localSearch });
       if (localSearch && state.localData.length > 0) {
         const result: SelectedItem[] = state.localData.filter((item: SelectedItem) => {
           return `${item.title}`?.toLowerCase().includes(ref_searchQuery.current.toLowerCase());
@@ -267,7 +270,7 @@ const AutoPositionedPopupList: React.FC<AutoPositionedPopupListProps> = memo(
       return null;
     };
     const _renderItem = useCallback(
-      ({item, index}: { item: SelectedItem; index: number }) => {
+      ({ item, index }: { item: SelectedItem; index: number }) => {
         return <ListItem item={item} index={index} updateState={_updateState} selectedItem={state.selectedItem} themeMode={themeMode} />;
       },
       [state.selectedItem, themeMode]
@@ -277,14 +280,15 @@ const AutoPositionedPopupList: React.FC<AutoPositionedPopupListProps> = memo(
       // Babel configuration handles the path redirection based on global.$fake
       // No need for conditional import here
       return (
-        <View style={[styles.baseModalView, styles.autoPositionedPopupList, {backgroundColor: themeMode === 'light' ? '#fff' : 'rgba(44, 44, 46, 1)',}]}>
+        <View style={[styles.baseModalView, styles.autoPositionedPopupList, { backgroundColor: themeMode === 'light' ? '#fff' : 'rgba(44, 44, 46, 1)', }]}>
+          {internalSearchTextInput}
           <AdvancedFlatList
-            style={[{borderRadius: 0}]}
-            {...(ref_list && {ref: ref_list})}
+            style={[{ borderRadius: 0 }, internalSearchTextInput ? { flex: 1 } : undefined]}
+            {...(ref_list && { ref: ref_list })}
             keyExtractor={(item, index) => keyExtractor ? keyExtractor(item as SelectedItem) : (item as SelectedItem).id}
             keyboardShouldPersistTaps={'always'}
             fetchData={_fetchData}
-            renderItem={renderItem ? ({item, index}) => renderItem({item: item as SelectedItem, index}) : ({item, index}) => _renderItem({item: item as SelectedItem, index})}
+            renderItem={renderItem ? ({ item, index }) => renderItem({ item: item as SelectedItem, index }) : ({ item, index }) => _renderItem({ item: item as SelectedItem, index })}
             showListEmptyComponent={showListEmptyComponent}
             emptyText={emptyText}
           />
@@ -300,7 +304,7 @@ const AutoPositionedPopupList: React.FC<AutoPositionedPopupListProps> = memo(
       searchQuery,
       localSearch,
       pageSize,
-      rootViewsRef, showListEmptyComponent, emptyText, themeMode
+      rootViewsRef, showListEmptyComponent, emptyText, themeMode, internalSearchTextInput
     ]);
   }
 );
@@ -315,6 +319,12 @@ interface StateProps {
 const listLayout = {
   height: 200,
 };
+const internalSearchListLayout = {
+  height: 300,
+};
+const internalSearchInputLayout = {
+  height: 50,
+};
 
 // Main AutoPositionedPopup component
 const AutoPositionedPopup = memo(
@@ -330,12 +340,12 @@ const AutoPositionedPopup = memo(
         TextInputProps,//= {autoFocus: true},
         inputStyle,
         labelStyle,
-        popUpViewStyle = {left: '5%', width: '90%'},
+        popUpViewStyle = { left: '5%', width: '90%' },
         fetchData = async ({
-                             pageIndex,
-                             pageSize,
-                             searchQuery,
-                           }: {
+          pageIndex,
+          pageSize,
+          searchQuery,
+        }: {
           pageIndex: number;
           pageSize: number;
           searchQuery?: string;
@@ -362,7 +372,7 @@ const AutoPositionedPopup = memo(
         selectedItem,
         useTextInput = false,
         btwChildren,
-        CustomRow = ({children}) => <View>{children}</View>,
+        CustomRow = ({ children }) => <View>{children}</View>,
         keyExtractor = (item: any) => String(item?.id || ''),
         AutoPositionedPopupBtnDisabled = false,
         forceRemoveAllRootViewOnItemSelected = false,
@@ -370,7 +380,7 @@ const AutoPositionedPopup = memo(
         selectedItemBackgroundColor = 'rgba(116, 116, 128, 0.08)',
         // textAlign = 'right',
         CustomPopView = undefined, CustomPopViewStyle, showListEmptyComponent = true, emptyText = '', onChangeText, themeMode = 'light',
-        parentScrollViewRef, scrollExtraHeight = 100,
+        parentScrollViewRef, scrollExtraHeight = 100, internalSearch = false,
       } = props;
       // State management similar to project implementation
       const [state, setState] = useState<StateProps>({
@@ -378,7 +388,7 @@ const AutoPositionedPopup = memo(
         selectedItem: selectedItem,
       });
       // Use RootView context
-      const {addRootView, setRootViewNativeStyle, updateRootView, removeRootView, rootViews, setSearchQuery} = useRootView();
+      const { addRootView, setRootViewNativeStyle, updateRootView, removeRootView, rootViews, setSearchQuery } = useRootView();
       const rootViewsRef = useRef(rootViews);
       // Track TextInput focus and RootView states like project implementation
       const hasTriggeredFocus = useRef(false);
@@ -391,7 +401,7 @@ const AutoPositionedPopup = memo(
       const refAutoPositionedPopup = useRef<View>(null);
       const ref_searchQuery = useRef<string>('');
       // Store trigger button position when clicked (before it's replaced by TextInput)
-      const triggerPositionRef = useRef<{x: number; y: number; width: number; height: number} | null>(null);
+      const triggerPositionRef = useRef<{ x: number; y: number; width: number; height: number } | null>(null);
       // V19: Track keyboard height for accurate popup positioning
       const keyboardHeightRef = useRef<number>(0);
       // Add ref to track previous keyboard state to avoid false triggers during parent component re-renders
@@ -417,7 +427,7 @@ const AutoPositionedPopup = memo(
         top: number;
         left: number;
         width: number;
-      }>({top: 0, left: 0, width: 0});
+      }>({ top: 0, left: 0, width: 0 });
       // Refs for performance optimization
       const containerRef = useRef<View>(null);
       const textInputRef = useRef<RNTextInput>(null);
@@ -580,7 +590,7 @@ const AutoPositionedPopup = memo(
       useEffect(() => {
         (async () => {
         })();
-        debugLog(`AutoPositionedPopup componentDidMount=`, {tag, CustomPopView});
+        debugLog(`AutoPositionedPopup componentDidMount=`, { tag, CustomPopView });
         //componentWillUnmount
         return () => {
           debugLog(`AutoPositionedPopup componentWillUnmount tag=`, tag);
@@ -596,7 +606,7 @@ const AutoPositionedPopup = memo(
         };
       }, []);
       useEffect(() => {
-        debugLog('AutoPositionedPopup rootViews=', {tag, rootViews});
+        debugLog('AutoPositionedPopup rootViews=', { tag, rootViews });
         rootViewsRef.current = rootViews;
         if (rootViews.length === 0) {
           hasAddedRootView.current = false;
@@ -613,7 +623,7 @@ const AutoPositionedPopup = memo(
         }
       }, [rootViews]);
       useEffect(() => {
-        debugLog('AutoPositionedPopup useEffect [selectedItem, state.selectedItem, tag]=', {tag, selectedItem, 'state.selectedItem': state.selectedItem});
+        debugLog('AutoPositionedPopup useEffect [selectedItem, state.selectedItem, tag]=', { tag, selectedItem, 'state.selectedItem': state.selectedItem });
         debugLog('AutoPositionedPopup useEffect state.selectedItem=', state.selectedItem);
         if (state.selectedItem?.id !== selectedItem?.id || state.selectedItem?.title != selectedItem?.title) {
           debugLog('AutoPositionedPopup useEffect selectedItem!=state.selectedItem');
@@ -682,8 +692,8 @@ const AutoPositionedPopup = memo(
             return StatusBar.currentHeight || 24; // Fallback to 24 if undefined
           } else {
             // iOS: Calculate from screen vs window height difference
-            const {height: screenHeightFull} = Dimensions.get('screen');
-            const {height: windowHeight} = Dimensions.get('window');
+            const { height: screenHeightFull } = Dimensions.get('screen');
+            const { height: windowHeight } = Dimensions.get('window');
             return screenHeightFull - windowHeight; // Safe area top (status bar)
           }
         };
@@ -743,10 +753,10 @@ const AutoPositionedPopup = memo(
                 // Measure BOTH refs for comparison
                 if (textInputRef.current && refAutoPositionedPopup.current) {
                   textInputRef.current.measureInWindow((tx: number | undefined, ty: number | undefined, tw: number | undefined, th: number | undefined) => {
-                    debugLog('AutoPositionedPopup DEBUG: textInputRef position=', {x: tx, y: ty, width: tw, height: th});
+                    debugLog('AutoPositionedPopup DEBUG: textInputRef position=', { x: tx, y: ty, width: tw, height: th });
                   });
                   refAutoPositionedPopup.current.measureInWindow((rx: number | undefined, ry: number | undefined, rw: number | undefined, rh: number | undefined) => {
-                    debugLog('AutoPositionedPopup DEBUG: refAutoPositionedPopup position=', {x: rx, y: ry, width: rw, height: rh});
+                    debugLog('AutoPositionedPopup DEBUG: refAutoPositionedPopup position=', { x: rx, y: ry, width: rw, height: rh });
                   });
                 }
 
@@ -761,7 +771,7 @@ const AutoPositionedPopup = memo(
                   const screenHeightFallback = Dimensions.get('window').height;
                   const screenWidthFallback = Dimensions.get('window').width;
                   const fallbackY = (screenHeightFallback - listLayout.height) / 2;
-                  ref_listPos.current = {x: screenWidthFallback * 0.05, y: fallbackY, width: screenWidthFallback * 0.9};
+                  ref_listPos.current = { x: screenWidthFallback * 0.05, y: fallbackY, width: screenWidthFallback * 0.9 };
                   updateRootView(tag, {
                     style: {
                       top: ref_listPos.current?.y,
@@ -837,7 +847,7 @@ const AutoPositionedPopup = memo(
                   positionDebugLog(`V19f_RESULT: position=${position} popupY=${popupY} popupBottom=${popupBottom}`);
                   positionDebugLog(`V19f_GAP: trigger_top=${triggerTop} - popup_bottom=${popupBottom} = gap=${gapPixels}px`);
 
-                  ref_listPos.current = {x, y: popupY, width};
+                  ref_listPos.current = { x, y: popupY, width };
                   updateRootView(tag, {
                     style: { top: popupY, left: popUpViewStyle?.left, width: popUpViewStyle?.width, height: listLayout.height, opacity: 1 }
                   });
@@ -849,7 +859,7 @@ const AutoPositionedPopup = memo(
             // Only execute close logic when keyboard state actually changes from true to false
             debugLog(
               'AutoPositionedPopup isKeyboardFullyShown useEffect removeRootView (keyboard state changed)=',
-              {tag, forceRemoveAllRootViewOnItemSelected, keyboardStateChanged}
+              { tag, forceRemoveAllRootViewOnItemSelected, keyboardStateChanged }
             );
             removeRootView(tag, forceRemoveAllRootViewOnItemSelected);
             setState((prevState) => {
@@ -867,16 +877,71 @@ const AutoPositionedPopup = memo(
           // User request: "只要传入的 useTextInput 是 false, 弹框都显示在屏幕中间"
           // This avoids all complex positioning calculations that kept failing
           if (state.isFocus) {
+            if (internalSearch && isKeyboardFullyShown && hasAddedRootView.current) {
+              return;
+            }
             if (isKeyboardFullyShown) {
               Keyboard.dismiss();
               return;
             }
 
+            if (internalSearch) {
+              if (hasAddedRootView.current) {
+                return;
+              }
+              hasAddedRootView.current = true;
+              hasShownRootView.current = true;
+              const internalSearchPopupTop = (Platform.OS === 'android' ? StatusBar.currentHeight || 0 : 0) + 52;
+              const internalSearchPopupHeight = internalSearchListLayout.height + internalSearchInputLayout.height;
+              debugLog('AutoPositionedPopup internalSearch useTextInput=false, showing popup below top navigation', {
+                tag,
+                internalSearchPopupTop,
+                internalSearchPopupHeight,
+              });
+              addRootView({
+                id: tag,
+                style: {
+                  top: internalSearchPopupTop,
+                  left: popUpViewStyle?.left,
+                  width: popUpViewStyle?.width,
+                  height: internalSearchPopupHeight,
+                  opacity: 1,
+                },
+                component: (
+                  <AutoPositionedPopupList
+                    tag={tag}
+                    updateState={updateState}
+                    fetchData={fetchData}
+                    pageSize={pageSize}
+                    renderItem={renderItem}
+                    selectedItem={state.selectedItem}
+                    localSearch={localSearch}
+                    showListEmptyComponent={showListEmptyComponent}
+                    emptyText={emptyText}
+                    themeMode={themeMode}
+                    internalSearchTextInput={internalSearchMemoizedTextInput}
+                  />
+                ),
+                useModal: true,
+                onModalClose: () => {
+                  debugLog('AutoPositionedPopup internalSearch onModalClose tag=', tag);
+                  removeRootView(tag, forceRemoveAllRootViewOnItemSelected, rootViewsRef.current);
+                  hasAddedRootView.current = false;
+                  hasShownRootView.current = false;
+                  hasTriggeredFocus.current = false;
+                  ref_isFocus.current = false;
+                  setState((prevState) => ({ ...prevState }));
+                  setSearchQuery('');
+                },
+              });
+              return;
+            }
+
             debugLog('🟢🟢🟢 POPUP_V17 useTextInput=false, showing popup in CENTER of screen');
 
-            const actualPopupHeight = CustomPopView && CustomPopViewStyle && typeof CustomPopViewStyle.height === 'number'
-              ? CustomPopViewStyle.height
-              : listLayout.height;
+            // const actualPopupHeight = CustomPopView && CustomPopViewStyle && typeof CustomPopViewStyle.height === 'number'
+            //   ? CustomPopViewStyle.height
+            //   : listLayout.height;
 
             if (CustomPopView && CustomPopViewStyle) {
               const PopViewComponent = CustomPopView();
@@ -920,22 +985,22 @@ const AutoPositionedPopup = memo(
           }
         }
       }, [isKeyboardFullyShown,
-      state.isFocus,
-      useTextInput,
-      CustomPopView,
-      CustomPopViewStyle,
-      forceRemoveAllRootViewOnItemSelected,
-      tag, TextInputProps,
-      state.selectedItem, showListEmptyComponent, themeMode
-    ]);
+        state.isFocus,
+        useTextInput,
+        CustomPopView,
+        CustomPopViewStyle,
+        forceRemoveAllRootViewOnItemSelected,
+        tag, TextInputProps,
+        state.selectedItem, showListEmptyComponent, themeMode
+      ]);
 
-    // V18: All positioning logic is now in the useEffect above
-    // V18 FIX (2025-01-04): Wait 1000ms after keyboard appears before measuring position
-    // This ensures trigger position is stable after KeyboardAwareScrollView scrolls
-    // Formula: top = componentY - popupHeight (popup bottom touches trigger top exactly)
+      // V18: All positioning logic is now in the useEffect above
+      // V18 FIX (2025-01-04): Wait 1000ms after keyboard appears before measuring position
+      // This ensures trigger position is stable after KeyboardAwareScrollView scrolls
+      // Formula: top = componentY - popupHeight (popup bottom touches trigger top exactly)
 
-    // Imperative handle for parent component access
-    useImperativeHandle(
+      // Imperative handle for parent component access
+      useImperativeHandle(
         parentRef,
         () => ({
           clearSelectedItem: () => {
@@ -954,14 +1019,14 @@ const AutoPositionedPopup = memo(
             removeRootView(tag, forceRemoveAllRootViewOnItemSelected);
             setSearchQuery('');
             if (textInputRef.current) {
-              textInputRef.current.setNativeProps({text: ''});
+              textInputRef.current.setNativeProps({ text: '' });
             }
           },
         }),
         []
       );
       const updateState = (key: string, value: SelectedItem) => {
-        debugLog('AutoPositionedPopup updateState=', {key, value});
+        debugLog('AutoPositionedPopup updateState=', { key, value });
         setState((prevState) => ({
           ...prevState,
           [key]: value,
@@ -1003,7 +1068,7 @@ const AutoPositionedPopup = memo(
       // Only update when deep comparison detects real changes to avoid TextInput recreation due to reference changes during parent component redraws
       const stableInputStyle = useMemo(() => {
         if (!shallowEqual(stableInputStyleRef.current, inputStyle)) {
-          debugLog(`AutoPositionedPopup stableInputStyle: `, {tag, inputStyle, themeMode});
+          debugLog(`AutoPositionedPopup stableInputStyle: `, { tag, inputStyle, themeMode });
           stableInputStyleRef.current = inputStyle;
         }
         return stableInputStyleRef.current;
@@ -1014,7 +1079,7 @@ const AutoPositionedPopup = memo(
           debugLog(`AutoPositionedPopup TextInputProps deep change detected, updating stable reference - tag: ${tag}`);
           stableTextInputPropsRef.current = TextInputProps;
         }
-        debugLog('AutoPositionedPopup stableTextInputProps=', {tag, TextInputProps, 'stableTextInputPropsRef.current': stableTextInputPropsRef.current})
+        debugLog('AutoPositionedPopup stableTextInputProps=', { tag, TextInputProps, 'stableTextInputPropsRef.current': stableTextInputPropsRef.current })
         return stableTextInputPropsRef.current;
       }, [TextInputProps, tag]);
 
@@ -1106,7 +1171,7 @@ const AutoPositionedPopup = memo(
         removeRootView(tag, forceRemoveAllRootViewOnItemSelected);
         setSearchQuery('');
         if (textInputRef.current) {
-          textInputRef.current.setNativeProps({text: ''});
+          textInputRef.current.setNativeProps({ text: '' });
           ref_searchQuery.current = '';
           // Remove textInputRef.current.blur() - avoid forcing blur causing keyboard to close
         }
@@ -1116,7 +1181,7 @@ const AutoPositionedPopup = memo(
       // Wrap TextInput independently in useMemo to recreate only when key props change
       // This avoids repeated ref callback triggers due to other props changes during parent component redraws
       const memoizedTextInput = useMemo(() => {
-        debugLog('AutoPositionedPopup memoizedTextInput=', {tag, useTextInput, 'state.isFocus': state.isFocus, stableTextInputProps});
+        debugLog('AutoPositionedPopup memoizedTextInput=', { tag, useTextInput, 'state.isFocus': state.isFocus, stableTextInputProps });
         if (!useTextInput || !state.isFocus) {
           return null;
         }
@@ -1137,7 +1202,7 @@ const AutoPositionedPopup = memo(
             style={[
               styles.inputStyle,
               stableInputStyle,
-              (themeMode==='dark' && {color:'#fff'}),
+              (themeMode === 'dark' && { color: '#fff' }),
             ]}
             textAlign={stableTextInputProps && stableTextInputProps['textAlign'] || 'left'}
             multiline={stableTextInputProps && stableTextInputProps['multiline'] || false}
@@ -1204,6 +1269,106 @@ const AutoPositionedPopup = memo(
         // No longer use original inputStyle and TextInputProps, use stable references instead
         // Stable references only update when deep comparison detects actual content changes, avoiding frequent TextInput recreation during parent component redraws
       ]);
+      const internalSearchMemoizedTextInput = useMemo(() => {
+        debugLog('AutoPositionedPopup internalSearchMemoizedTextInput=', { tag, internalSearch, 'state.isFocus': state.isFocus, stableTextInputProps });
+        if (!internalSearch || !state.isFocus) {
+          return null;
+        }
+        return (
+          <RNTextInput
+            ref={(ref) => {
+              if (ref && !textInputRef.current) {
+                debugLog(`AutoPositionedPopup internalSearch TextInput created/mounted - tag: ${tag}, ref:`, ref);
+              } else if (!ref && textInputRef.current) {
+                debugLog(`AutoPositionedPopup internalSearch TextInput unmounted - tag: ${tag}`);
+              } else if (ref && textInputRef.current && ref !== textInputRef.current) {
+                debugLog(`AutoPositionedPopup internalSearch TextInput replaced - tag: ${tag}, oldRef:`, textInputRef.current, 'newRef:', ref);
+              }
+              textInputRef.current = ref;
+            }}
+            key={`internal-search-textinput-${tag}`}
+            style={[
+              styles.inputStyle,
+              stableInputStyle,
+              {
+                flex: 0,
+                height: internalSearchInputLayout.height,
+                width: '100%',
+                paddingHorizontal: 12,
+              },
+              (themeMode === 'dark' && { color: '#fff' }),
+            ]}
+            textAlign={stableTextInputProps && stableTextInputProps['textAlign'] || 'left'}
+            multiline={stableTextInputProps && stableTextInputProps['multiline'] || false}
+            numberOfLines={stableTextInputProps && stableTextInputProps['numberOfLines'] || 1}
+            onChangeText={(searchQuery) => {
+              ref_searchQuery.current = searchQuery;
+              debugLog('AutoPositionedPopup internalSearch onChangeText rootViews=', rootViews);
+              if (!localSearch) {
+                if (debounceTimerRef.current) {
+                  clearTimeout(debounceTimerRef.current);
+                }
+                debounceTimerRef.current = setTimeout(() => {
+                  emitQueryChange(ref_searchQuery.current);
+                  if (!internalSearch) {
+                    onChangeText && onChangeText(ref_searchQuery.current);
+                  }
+                }, 500);
+              } else {
+                emitQueryChange(ref_searchQuery.current);
+                if (!internalSearch) {
+                  onChangeText && onChangeText(ref_searchQuery.current);
+                }
+              }
+            }}
+            placeholderTextColor={stableTextInputProps && stableTextInputProps['placeholderTextColor'] || theme.colors.placeholderText}
+            placeholder={placeholder}
+            onKeyPress={(e) => {
+              if (e.nativeEvent.key === 'Enter') {
+                Keyboard.dismiss();
+              }
+            }}
+            keyboardType={stableTextInputProps && stableTextInputProps['keyboardType'] || 'default'}
+            clearButtonMode="while-editing"
+            returnKeyType={stableTextInputProps && stableTextInputProps['returnKeyType'] || 'done'}
+            maxLength={stableTextInputProps && stableTextInputProps['maxLength'] || 100}
+            accessibilityLabel="selectInput"
+            accessible={true}
+            autoFocus={stableTextInputProps && stableTextInputProps['autoFocus'] || true}
+            autoCorrect={false}
+            underlineColorAndroid="transparent"
+            editable={stableTextInputProps && stableTextInputProps['editable'] || true}
+            secureTextEntry={stableTextInputProps && stableTextInputProps['secureTextEntry'] || false}
+            defaultValue=""
+            caretHidden={false}
+            enablesReturnKeyAutomatically
+            onFocus={handleTextInputFocus}
+            onBlur={handleTextInputBlur}
+            selectTextOnFocus={stableTextInputProps && stableTextInputProps['selectTextOnFocus'] || false}
+            onSubmitEditing={(e: NativeSyntheticEvent<TextInputSubmitEditingEventData>) => {
+              debugLog(
+                'AutoPositionedPopup.tsx internalSearch onSubmitEditing e.nativeEvent.text=',
+                e.nativeEvent.text
+              );
+              onSubmitEditing && onSubmitEditing(e);
+            }}
+          />
+        );
+      }, [
+        tag,
+        internalSearch,
+        state.isFocus,
+        handleTextInputFocus,
+        handleTextInputBlur,
+        stableInputStyle,
+        stableTextInputProps,
+        placeholder,
+        onSubmitEditing,
+        localSearch,
+        onChangeText,
+        rootViews,
+        themeMode,
+      ]);
 
       // Render the component following project implementation
       return useMemo(() => {
@@ -1233,9 +1398,9 @@ const AutoPositionedPopup = memo(
                     // IMPORTANT: Always capture position regardless of parentScrollViewRef
                     if (triggerBtnRef.current) {
                       triggerBtnRef.current.measureInWindow((x, y, width, height) => {
-                        debugLog('AutoPositionedPopup onPress: captured trigger position=', {tag, x, y, width, height});
+                        debugLog('AutoPositionedPopup onPress: captured trigger position=', { tag, x, y, width, height });
                         if (x !== undefined && y !== undefined && width !== undefined && height !== undefined) {
-                          triggerPositionRef.current = {x, y, width, height};
+                          triggerPositionRef.current = { x, y, width, height };
                         }
                       });
                     }
@@ -1311,7 +1476,7 @@ const AutoPositionedPopup = memo(
                     <Text
                       style={[
                         styles.searchQueryTxt,
-                        state.selectedItem && {color: theme.colors.text},
+                        state.selectedItem && { color: theme.colors.text },
                         labelStyle,
                       ]}
                       numberOfLines={1}
@@ -1352,7 +1517,7 @@ const AutoPositionedPopup = memo(
         forceRemoveAllRootViewOnItemSelected,
         state.isFocus,
         showListEmptyComponent,
-        emptyText,
+        emptyText, internalSearch
         // ⚠Removed most dependencies that may cause re-rendering, keeping only core dependencies that truly affect component structure
         // This prevents TextInput recreation due to inline functions/objects during parent component redraws
       ]);