fix(react): update input value for SearchField in controlled case (#1433

)

Refs: #1432

docs/pages/components/SearchField.mdx

@@ -4,6 +4,7 @@ description: A form element that allows users to type in text for searching.
 source: https://github.com/dequelabs/cauldron/tree/develop/packages/react/src/components/SearchField/index.tsx
 ---
 
+import { useState } from 'react';
 import { SearchField, FieldWrap } from '@deque/cauldron-react';
 
 ```js
@@ -72,6 +73,28 @@ We include trailing children to allow for additional input context to be provide
 </FieldWrap>
 ```
 
+### Controlled
+`SearchField` can also be controlled, by setting the `value` prop and updating the value from event callbacks.
+
+```jsx example
+function ControlledSearchFieldExample() {
+  const [value, setValue] = useState('Banana');
+  const handleChange = (value) => {
+    setValue(value);
+  };
+
+  return (
+    <FieldWrap>
+      <SearchField
+        label="Controlled"
+        value={value}
+        onChange={handleChange}
+      />
+    </FieldWrap>
+  );
+}
+```
+
 ## Props
 
 <ComponentProps

packages/react/src/components/SearchField/SearchField.test.tsx

@@ -1,4 +1,4 @@
-import React, { createRef, ComponentProps } from 'react';
+import React, { createRef, ComponentProps, useState } from 'react';
 import { render as testingRender, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import { spy } from 'sinon';
@@ -127,6 +127,32 @@ test('should call onChange with input', async () => {
   expect(onChange.lastCall.firstArg).toEqual('hello world');
 });
 
+test('should change controlled value with onChange', async () => {
+  const ControlledWrapper = () => {
+    const [value, setValue] = useState('');
+    const handleChange = (newValue: string) => {
+      setValue(newValue);
+    };
+
+    return (
+      <SearchField
+        label="controlled field"
+        value={value}
+        onChange={handleChange}
+      />
+    );
+  };
+
+  const user = userEvent.setup();
+  const { getByRole } = testingRender(<ControlledWrapper />);
+
+  const input = getByRole('searchbox', { name: 'controlled field' });
+
+  expect(input).toHaveValue('');
+  await user.type(input, 'user input');
+  expect(input).toHaveValue('user input');
+});
+
 test('should render disabled SearchField', () => {
   const input = render({ disabled: true });
   expect(input).toBeDisabled();

packages/react/src/components/SearchField/index.tsx

@@ -98,7 +98,7 @@ const SearchField = forwardRef<HTMLInputElement, SearchFieldProps>(
           <Icon type="magnifying-glass" className="SearchField__search-icon" />
           <input
             id={inputId}
-            value={value}
+            value={isControlled ? propValue : value}
             onChange={handleChange}
             placeholder={placeholder}
             ref={ref}