chore (ui-react): propagate isDisabled to Clear button in SearchField (…

…#3708)

Co-authored-by: Ioana Brooks <68251134+ioanabrooks@users.noreply.github.com>
Co-authored-by: Scott Rees <6165315+reesscot@users.noreply.github.com>

.changeset/nine-yaks-behave.md

@@ -0,0 +1,5 @@
+---
+'@aws-amplify/ui-react': patch
+---
+
+Clear button is removed for disabled SearchField

packages/react/src/primitives/SearchField/SearchField.tsx

@@ -73,7 +73,7 @@ const SearchFieldPrimitive: Primitive<SearchFieldProps, 'input'> = (
         <FieldClearButton
           ariaLabel={clearButtonLabel}
           excludeFromTabOrder
-          isVisible={strHasLength(composedValue)}
+          isVisible={!isDisabled && strHasLength(composedValue)}
           onClick={onClearHandler}
           size={size}
           variation="link"

packages/react/src/primitives/SearchField/__tests__/SearchField.test.tsx

@@ -13,7 +13,7 @@ const testId = 'SearchFieldTestId';
 const searchQuery = 'Amplify UI components';
 
 describe('SearchField component', () => {
-  const ControlledSearchField = () => {
+  const ControlledSearchField = ({ isDisabled = false }) => {
     const [value, setValue] = React.useState('');
     const onChange: React.ChangeEventHandler<HTMLInputElement> = (event) => {
       setValue(event.target.value);
@@ -28,6 +28,7 @@ describe('SearchField component', () => {
         onChange={onChange}
         onClear={onClear}
         value={value}
+        isDisabled={isDisabled}
       />
     );
   };
@@ -225,5 +226,13 @@ describe('SearchField component', () => {
       const clearButton = await screen.findByLabelText(clearButtonLabel);
       expect(clearButton).toHaveAttribute('aria-label', clearButtonLabel);
     });
+
+    it('should remove clear button when input is disabled', async () => {
+      render(<ControlledSearchField isDisabled />);
+
+      const clearButton = screen.queryByLabelText(clearButtonLabel);
+
+      expect(clearButton).toBeNull();
+    });
   });
 });