fix: excess rerenders

Author: onmotion

example/components/LocalDataSetExample.tsx

@@ -1,11 +1,11 @@
 import React, { memo, useState } from 'react'
 import { Text, View } from 'react-native'
-import type { AutocompleteDropdownItem } from 'react-native-autocomplete-dropdown'
+import type { AutocompleteDropdownItem, IAutocompleteDropdownProps } from 'react-native-autocomplete-dropdown'
 import { AutocompleteDropdown } from 'react-native-autocomplete-dropdown'
 
 const ItemSeparatorComponent = () => <View style={{ height: 1, width: '100%', backgroundColor: '#d8e1e6' }} />
 
-export const LocalDataSetExample = memo(() => {
+export const LocalDataSetExample = memo((props: Omit<IAutocompleteDropdownProps, 'ref' | 'dataSet'>) => {
   const [selectedItem, setSelectedItem] = useState<AutocompleteDropdownItem | null>(null)
 
   return (
@@ -23,6 +23,7 @@ export const LocalDataSetExample = memo(() => {
         ]}
         ItemSeparatorComponent={ItemSeparatorComponent}
         ignoreAccents
+        {...props}
       />
       <Text style={{ color: '#668', fontSize: 13 }}>Selected item: {JSON.stringify(selectedItem)}</Text>
     </>

example/components/LocalDataSetExample2.tsx

@@ -1,9 +1,9 @@
 import React, { memo, useState } from 'react'
 import { Dimensions, Text } from 'react-native'
-import type { AutocompleteDropdownItem } from 'react-native-autocomplete-dropdown'
+import type { AutocompleteDropdownItem, IAutocompleteDropdownProps } from 'react-native-autocomplete-dropdown'
 import { AutocompleteDropdown } from 'react-native-autocomplete-dropdown'
 
-export const LocalDataSetExample2 = memo(() => {
+export const LocalDataSetExample2 = memo((props: Omit<IAutocompleteDropdownProps, 'ref' | 'dataSet'>) => {
   const [selectedItem, setSelectedItem] = useState<AutocompleteDropdownItem | null>(null)
 
   return (
@@ -32,6 +32,7 @@ export const LocalDataSetExample2 = memo(() => {
             -= {item.title} =-
           </Text>
         )}
+        {...props}
       />
       <Text style={{ color: '#668', fontSize: 13 }}>Selected item: {JSON.stringify(selectedItem)}</Text>
     </>

example/components/RemoteDataSetExample.tsx

@@ -1,9 +1,9 @@
 import React, { memo, useCallback, useState } from 'react'
 import { Text } from 'react-native'
-import type { AutocompleteDropdownItem } from 'react-native-autocomplete-dropdown'
+import type { AutocompleteDropdownItem, IAutocompleteDropdownProps } from 'react-native-autocomplete-dropdown'
 import { AutocompleteDropdown } from 'react-native-autocomplete-dropdown'
 
-export const RemoteDataSetExample = memo(() => {
+export const RemoteDataSetExample = memo((props: Omit<IAutocompleteDropdownProps, 'ref' | 'dataSet'>) => {
   const [loading, setLoading] = useState(false)
   const [remoteDataSet, setRemoteDataSet] = useState<AutocompleteDropdownItem[] | null>(null)
   const [selectedItem, setSelectedItem] = useState<AutocompleteDropdownItem | null>(null)
@@ -52,6 +52,7 @@ export const RemoteDataSetExample = memo(() => {
           color: '#8f3c96',
         }}
         EmptyResultComponent={<Text style={{ padding: 10, fontSize: 15 }}>Oops ¯\_(ツ)_/¯</Text>}
+        {...props}
       />
       <Text style={{ color: '#668', fontSize: 13 }}>Selected item: {JSON.stringify(selectedItem)}</Text>
     </>

example/components/RemoteDataSetExample2.tsx

@@ -1,9 +1,13 @@
 import React, { memo, useCallback, useRef, useState } from 'react'
 import { Button, Dimensions, Text, View } from 'react-native'
-import type { IAutocompleteDropdownRef, AutocompleteDropdownItem } from 'react-native-autocomplete-dropdown'
+import type {
+  IAutocompleteDropdownRef,
+  AutocompleteDropdownItem,
+  IAutocompleteDropdownProps,
+} from 'react-native-autocomplete-dropdown'
 import { AutocompleteDropdown } from 'react-native-autocomplete-dropdown'
 
-export const RemoteDataSetExample2 = memo(() => {
+export const RemoteDataSetExample2 = memo((props: Omit<IAutocompleteDropdownProps, 'ref' | 'dataSet'>) => {
   const [loading, setLoading] = useState(false)
   const [suggestionsList, setSuggestionsList] = useState<AutocompleteDropdownItem[] | null>(null)
   const [selectedItem, setSelectedItem] = useState<string | null>(null)
@@ -93,6 +97,7 @@ export const RemoteDataSetExample2 = memo(() => {
           showChevron={false}
           closeOnBlur={false}
           //  showClear={false}
+          {...props}
         />
         <View style={{ width: 10 }} />
         <Button title="Toggle" onPress={() => dropdownController.current?.toggle()} />

src/AutocompleteDropdownContext.tsx

@@ -10,7 +10,8 @@ export interface IAutocompleteDropdownContext {
   direction?: 'up' | 'down'
   setDirection: Dispatch<SetStateAction<IAutocompleteDropdownContext['direction']>>
   activeInputContainerRef?: MutableRefObject<View | null>
-  controllerRef?: MutableRefObject<IAutocompleteDropdownRef | null>
+  activeControllerRef?: MutableRefObject<IAutocompleteDropdownRef | null>
+  controllerRefs?: MutableRefObject<IAutocompleteDropdownRef[]>
 }
 
 export interface IAutocompleteDropdownContextProviderProps {
@@ -24,7 +25,8 @@ export const AutocompleteDropdownContext = React.createContext<IAutocompleteDrop
   direction: undefined,
   setDirection: () => null,
   activeInputContainerRef: undefined,
-  controllerRef: undefined,
+  activeControllerRef: undefined,
+  controllerRefs: undefined,
 })
 
 export const AutocompleteDropdownContextProvider: FC<IAutocompleteDropdownContextProviderProps> = ({
@@ -43,7 +45,8 @@ export const AutocompleteDropdownContextProvider: FC<IAutocompleteDropdownContex
     undefined,
   )
   const activeInputContainerRef = useRef<View>(null)
-  const controllerRef = useRef<IAutocompleteDropdownRef | null>(null)
+  const activeControllerRef = useRef<IAutocompleteDropdownRef | null>(null)
+  const controllerRefs = useRef<IAutocompleteDropdownRef[]>([])
   const positionTrackingIntervalRef = useRef<NodeJS.Timeout>()
 
   useEffect(() => {
@@ -119,12 +122,20 @@ export const AutocompleteDropdownContextProvider: FC<IAutocompleteDropdownContex
 
   return (
     <AutocompleteDropdownContext.Provider
-      value={{ content, setContent, activeInputContainerRef, direction, setDirection, controllerRef }}>
+      value={{
+        content,
+        setContent,
+        activeInputContainerRef,
+        direction,
+        setDirection,
+        activeControllerRef,
+        controllerRefs,
+      }}>
       <View
         style={styles.clickOutsideHandlerArea}
         onTouchEnd={() => {
-          controllerRef.current?.close()
-          controllerRef.current?.blur()
+          activeControllerRef.current?.close()
+          activeControllerRef.current?.blur()
         }}>
         {children}
       </View>

src/index.tsx

@@ -104,9 +104,10 @@ export const AutocompleteDropdown = memo<
       content,
       setContent,
       activeInputContainerRef,
-      controllerRef,
+      activeControllerRef,
       direction = directionProp,
       setDirection,
+      controllerRefs,
     } = useContext(AutocompleteDropdownContext)
     const themeName = useColorScheme() || 'light'
     const styles = useMemo(() => getStyles(themeName), [themeName])
@@ -220,18 +221,31 @@ export const AutocompleteDropdown = memo<
       setSelectedItem(item)
     }, [])
 
+    useEffect(() => {
+      if (activeControllerRef?.current) {
+        controllerRefs?.current.push(activeControllerRef?.current)
+      }
+      // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [])
+
+    const closeAll = useCallback(() => {
+      controllerRefs?.current.forEach(c => {
+        c?.close?.()
+      })
+    }, [controllerRefs])
+
     /** expose controller methods */
     useEffect(() => {
-      const methods = controllerRef ? { close, blur, open, toggle, clear, setInputText, setItem } : null
-      if (controllerRef) {
-        controllerRef.current = methods
+      const methods = activeControllerRef ? { close, blur, open, toggle, clear, setInputText, setItem } : null
+      if (activeControllerRef) {
+        activeControllerRef.current = methods
       }
       if (typeof controller === 'function') {
         controller(methods)
       } else if (controller) {
         controller.current = methods
       }
-    }, [blur, clear, close, controller, controllerRef, open, setInputText, setItem, toggle])
+    }, [blur, clear, close, controller, activeControllerRef, open, setInputText, setItem, toggle])
 
     useEffect(() => {
       if (selectedItem) {
@@ -377,9 +391,10 @@ export const AutocompleteDropdown = memo<
         if (typeof onFocusProp === 'function') {
           onFocusProp(e)
         }
+        closeAll()
         open()
       },
-      [clearOnFocus, onFocusProp, open],
+      [clearOnFocus, closeAll, onFocusProp, open],
     )
 
     const onBlur = useCallback(