feat: Add disableBrowserAutocorrect prop to TextFilter (#2900)

src/__tests__/__snapshots__/documenter.test.ts.snap

@@ -16181,6 +16181,16 @@ The count text is only displayed when \`filteringText\` isn't empty.
       "optional": true,
       "type": "string",
     },
+    {
+      "description": "Specifies whether to disable browser autocorrect and related features.
+If you set this to \`true\`, it disables any native browser capabilities
+that automatically correct user input, such as \`autocorrect\` and
+\`autocapitalize\`. If you don't set it, the behavior follows the default behavior
+of the user's browser.",
+      "name": "disableBrowserAutocorrect",
+      "optional": true,
+      "type": "boolean",
+    },
     {
       "description": "Specifies if the filtering input is disabled.
 For example, you can use it if you are fetching new items upon filtering change

src/text-filter/__tests__/text-filter.test.tsx

@@ -139,6 +139,32 @@ describe('countText', () => {
   });
 });
 
+describe('disableBrowserAutocorrect', () => {
+  test('does not modify autocorrect features by default', () => {
+    const { wrapper } = renderTextFilter(<TextFilter filteringText="" />);
+    const input = wrapper.findInput().findNativeInput().getElement();
+
+    expect(input).not.toHaveAttribute('autocorrect');
+    expect(input).not.toHaveAttribute('autocapitalize');
+  });
+
+  test('does not modify autocorrect features when falsy', () => {
+    const { wrapper } = renderTextFilter(<TextFilter filteringText="" disableBrowserAutocorrect={false} />);
+    const input = wrapper.findInput().findNativeInput().getElement();
+
+    expect(input).not.toHaveAttribute('autocorrect');
+    expect(input).not.toHaveAttribute('autocapitalize');
+  });
+
+  test('can disabled autocorrect features when set', () => {
+    const { wrapper } = renderTextFilter(<TextFilter filteringText="" disableBrowserAutocorrect={true} />);
+    const input = wrapper.findInput().findNativeInput().getElement();
+
+    expect(input).toHaveAttribute('autocorrect', 'off');
+    expect(input).toHaveAttribute('autocapitalize', 'off');
+  });
+});
+
 test('check a11y', async () => {
   const { wrapper } = renderTextFilter(<TextFilter filteringText="" filteringAriaLabel="filter instances" />);
   await expect(wrapper.getElement()).toValidateA11y();

src/text-filter/index.tsx

@@ -13,7 +13,9 @@ import InternalTextFilter from './internal';
 export { TextFilterProps };
 
 const TextFilter = React.forwardRef((props: TextFilterProps, ref: React.Ref<TextFilterProps.Ref>) => {
-  const baseComponentProps = useBaseComponent('TextFilter');
+  const baseComponentProps = useBaseComponent('TextFilter', {
+    props: { disabled: props.disabled, disableBrowserAutocorrect: props.disableBrowserAutocorrect },
+  });
 
   const componentAnalyticsMetadata: GeneratedAnalyticsMetadataTextFilterComponent = {
     name: 'awsui.TextFilter',

src/text-filter/interfaces.ts

@@ -1,10 +1,11 @@
 // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
 // SPDX-License-Identifier: Apache-2.0
+import { InputAutoCorrect } from '../input/interfaces';
 import { BaseComponentProps } from '../internal/base-component';
 import { FormFieldControlProps } from '../internal/context/form-field-context';
 import { NonCancelableEventHandler } from '../internal/events';
 
-export interface TextFilterProps extends BaseComponentProps, FormFieldControlProps {
+export interface TextFilterProps extends BaseComponentProps, FormFieldControlProps, InputAutoCorrect {
   /**
    * The current value of the filtering input.
    */

src/text-filter/internal.tsx

@@ -30,6 +30,7 @@ const InternalTextFilter = React.forwardRef(
       ariaDescribedby,
       disabled,
       countText,
+      disableBrowserAutocorrect,
       onChange,
       onDelayedChange,
       __internalRootRef,
@@ -52,6 +53,7 @@ const InternalTextFilter = React.forwardRef(
       <div {...baseProps} className={clsx(baseProps.className, styles.root)} ref={__internalRootRef}>
         <InternalInput
           __inheritFormFieldProps={true}
+          disableBrowserAutocorrect={disableBrowserAutocorrect}
           ref={inputRef}
           className={styles.input}
           type="search"