fix: custom text input loosing focus (#349)

Author: mrlaessig

packages/react-native-autocomplete-input/__tests__/AutocompleteInput.spec.tsx

@@ -1,5 +1,5 @@
 import React, { type ReactElement } from 'react';
-import { render, screen, within } from '@testing-library/react-native';
+import { render, screen, userEvent, within } from '@testing-library/react-native';
 import { FlatList, TextInput, type FlatListProps } from 'react-native';
 
 import Autocomplete from '../index';
@@ -104,7 +104,7 @@ describe('<AutocompleteInput />', () => {
         data={[]}
         placeholder="Enter search"
         renderResultList={() => <></>}
-        renderTextInput={MockTextInput}
+        renderTextInput={(props) => <MockTextInput {...props} />}
       />,
     );
 
@@ -123,4 +123,27 @@ describe('<AutocompleteInput />', () => {
       {},
     );
   });
+
+  it('should preserve custom text input on re-render', async () => {
+    function TestWrapper() {
+      const [text, setText] = React.useState('');
+      return (
+        <Autocomplete
+          data={ITEMS}
+          placeholder="Enter search"
+          renderTextInput={(props) => <TextInput {...props} value={text} onChangeText={setText} />}
+          value={text}
+        />
+      );
+    }
+
+    render(<TestWrapper />);
+
+    const input = screen.getByPlaceholderText('Enter search');
+    await userEvent.type(input, 'A');
+    expect(input).toHaveDisplayValue('A');
+
+    await userEvent.type(input, ' New Hope');
+    expect(input).toHaveDisplayValue('A New Hope');
+  });
 });

packages/react-native-autocomplete-input/index.tsx

@@ -41,7 +41,7 @@ export const AutocompleteInput = React.forwardRef(function AutocompleteInputComp
     onShowResults,
     onStartShouldSetResponderCapture = () => false,
     renderResultList: ResultList = FlatList,
-    renderTextInput: AutoCompleteTextInput = TextInput,
+    renderTextInput: customRenderTextInput = (props) => <TextInput {...props} />,
     flatListProps,
     style,
     ...textInputProps
@@ -59,14 +59,14 @@ export const AutocompleteInput = React.forwardRef(function AutocompleteInputComp
     return <ResultList {...listProps} />;
   }
 
-  function renderTextInput(): React.ReactElement {
+  function renderTextInput(): React.ReactNode {
     const renderProps = {
       ...textInputProps,
       style: [styles.input, style],
-      ref,
+      ...(ref && { ref }),
     };
 
-    return <AutoCompleteTextInput {...renderProps} />;
+    return customRenderTextInput(renderProps);
   }
 
   const showResults = data.length > 0;