From d019cd37a4313a333dc51db7fc0b255d710e164a Mon Sep 17 00:00:00 2001
From: Abdallah AlHalees <alhalee@amazon.de>
Date: Fri, 18 Oct 2024 13:47:24 +0200
Subject: [PATCH] feat: Add disableBrowserAutocorrect prop to TextFilter
 (#2900)

---
 .../__snapshots__/documenter.test.ts.snap     | 10 +++++++
 .../__tests__/text-filter.test.tsx            | 26 +++++++++++++++++++
 src/text-filter/index.tsx                     |  4 ++-
 src/text-filter/interfaces.ts                 |  3 ++-
 src/text-filter/internal.tsx                  |  2 ++
 5 files changed, 43 insertions(+), 2 deletions(-)

diff --git a/src/__tests__/__snapshots__/documenter.test.ts.snap b/src/__tests__/__snapshots__/documenter.test.ts.snap
index 3c64346b63..c79f2d71e5 100644
--- a/src/__tests__/__snapshots__/documenter.test.ts.snap
+++ b/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
diff --git a/src/text-filter/__tests__/text-filter.test.tsx b/src/text-filter/__tests__/text-filter.test.tsx
index 977593883d..353dcd3be3 100644
--- a/src/text-filter/__tests__/text-filter.test.tsx
+++ b/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();
diff --git a/src/text-filter/index.tsx b/src/text-filter/index.tsx
index 4d6ec91ab8..a5b1cc60ba 100644
--- a/src/text-filter/index.tsx
+++ b/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',
diff --git a/src/text-filter/interfaces.ts b/src/text-filter/interfaces.ts
index df0ef803a7..9b3452f56b 100644
--- a/src/text-filter/interfaces.ts
+++ b/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.
    */
diff --git a/src/text-filter/internal.tsx b/src/text-filter/internal.tsx
index f99297dc19..f61d6f337d 100644
--- a/src/text-filter/internal.tsx
+++ b/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"