fix: focus being lost when input value is set from external state

Author: BramKaashoek

.changeset/custom-components-story.md

@@ -0,0 +1,5 @@
+---
+"react-loqate": patch
+---
+
+- Fix focus being lost when input value is set from external state

pnpm-lock.yaml

@@ -377,3 +377,61 @@ it('accepts origin and bias options', async () => {
     text: 'a',
   });
 });
+
+it('preserves focus when using custom Input with external state management', async () => {
+  function TestComponent() {
+    const [, setExternalState] = React.useState('');
+
+    return (
+      <AddressSearch
+        locale="en-GB"
+        apiKey="test-key"
+        onSelect={() => {}}
+        components={{
+          // eslint-disable-next-line @typescript-eslint/no-explicit-any
+          Input: React.forwardRef<HTMLInputElement, any>(
+            ({ value, onChange, ...rest }, ref) => {
+              React.useEffect(() => {
+                setExternalState(value || '');
+              }, [value]);
+
+              return (
+                <input
+                  ref={ref}
+                  value={value || ''}
+                  onChange={(event) => {
+                    onChange?.(event);
+                    setExternalState(event.target.value);
+                  }}
+                  {...rest}
+                  data-testid="external-state-input"
+                />
+              );
+            }
+          ),
+        }}
+      />
+    );
+  }
+
+  render(<TestComponent />);
+
+  const input = screen.getByTestId('external-state-input') as HTMLInputElement;
+  input.focus();
+  expect(document.activeElement).toBe(input);
+
+  fireEvent.change(input, { target: { value: 'a' } });
+
+  await screen.findByRole('list');
+
+  await waitFor(
+    () => {
+      const currentInput = screen.getByTestId('external-state-input');
+      expect(document.activeElement).toBe(currentInput);
+    },
+    { timeout: 1000 }
+  );
+
+  const suggestions = screen.getAllByRole('listitem');
+  expect(suggestions.length).toBeGreaterThan(0);
+});

src/index.test.tsx

@@ -1,9 +1,8 @@
 import clsx from 'clsx';
 import React, {
-  ChangeEvent,
-  ComponentType,
+  type ChangeEvent,
+  type ComponentType,
   useMemo,
-  useRef,
   useState,
 } from 'react';
 import DefaultInput from './components/DefaultInput';
@@ -13,6 +12,7 @@ import ClickAwayListener from './utils/ClickAwayListener';
 import Loqate from './utils/Loqate';
 import Portal from './utils/Portal';
 import useDebounceEffect from './utils/useDebounceEffect';
+import usePreserveFocus from './utils/usePreserveFocus';
 
 export interface Props {
   locale: string;
@@ -141,7 +141,9 @@ function AddressSearch(props: Props): JSX.Element {
   const [value, setValue] = useState('');
   const [, setError] = useState(null);
 
-  const anchorRef = useRef<HTMLInputElement>(null);
+  const { elementRef: anchorRef, preserveFocus } =
+    usePreserveFocus<HTMLInputElement>();
+
   const rect = anchorRef.current?.getBoundingClientRect();
 
   async function find(text: string, containerId?: string): Promise<Item[]> {
@@ -200,6 +202,8 @@ function AddressSearch(props: Props): JSX.Element {
   }: ChangeEvent<HTMLInputElement>): Promise<void> {
     const { value: search } = target;
 
+    // Custom Input components with external state management can cause DOM reconciliation issues that lose focus
+    preserveFocus();
     setValue(search);
   }
 

src/index.tsx

@@ -1,6 +1,6 @@
-import { Meta, StoryObj } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react';
 import React, { useState } from 'react';
-import AddressSearch, { Address, Props } from '..';
+import AddressSearch, { type Address, type Props } from '..';
 
 const meta: Meta = {
   title: 'Loqate Address Search',