From d6c81a48c5faf3f37ce47e727660349908343110 Mon Sep 17 00:00:00 2001
From: Andrew McGoveran <andrew.mcgoveran@shopify.com>
Date: Thu, 17 Jun 2021 10:05:23 -0400
Subject: [PATCH 1/4] Require autoComplete prop on TextField

---
 UNRELEASED.md                                 |   1 +
 .../src/App.tsx                               |   3 +
 examples/create-react-app/src/App.js          |   3 +
 examples/next.js/pages/index.js               |  12 +-
 examples/webpack/src/App.js                   |  12 +-
 playground/DetailsPage.tsx                    |   4 +
 .../ComboBox/tests/ComboBox.test.tsx          |   2 +-
 .../components/TextField/TextField.tsx        |   2 +-
 .../Autocomplete/tests/Autocomplete.test.tsx  |   4 +-
 src/components/ChoiceList/README.md           |   2 +
 src/components/Filters/Filters.tsx            |   1 +
 src/components/Filters/README.md              |   9 +
 src/components/Form/README.md                 |   2 +
 src/components/FormLayout/README.md           |  31 ++-
 .../components/Group/tests/Group.test.tsx     |   2 +-
 .../components/Item/tests/Item.test.tsx       |   4 +-
 .../FormLayout/tests/FormLayout.test.tsx      |   4 +-
 src/components/Frame/README.md                |   8 +
 src/components/IndexTable/README.md           |   3 +
 src/components/Layout/README.md               |  18 +-
 src/components/Modal/README.md                |   1 +
 .../Pagination/tests/Pagination.test.tsx      |   7 +-
 src/components/Popover/README.md              |   1 +
 .../tests/PopoverOverlay.test.tsx             |  10 +-
 src/components/RangeSlider/README.md          |   2 +
 src/components/ResourceList/README.md         |   3 +
 .../FilterControl/FilterControl.tsx           |   1 +
 .../components/DateSelector/DateSelector.tsx  |   2 +-
 .../FilterValueSelector.tsx                   |   1 +
 src/components/Select/README.md               |   1 +
 src/components/Spinner/README.md              |   1 +
 src/components/TextField/README.md            |  25 +-
 src/components/TextField/TextField.tsx        |  16 +-
 .../TextField/tests/TextField.test.tsx        | 215 ++++++++++++++----
 src/components/Tooltip/README.md              |   2 +-
 .../TrapFocus/tests/TrapFocus.test.tsx        |  26 ++-
 src/components/VisuallyHidden/README.md       |   8 +-
 37 files changed, 349 insertions(+), 100 deletions(-)

diff --git a/UNRELEASED.md b/UNRELEASED.md
index 2ff6214bf7f..ad4c78f2d95 100644
--- a/UNRELEASED.md
+++ b/UNRELEASED.md
@@ -6,6 +6,7 @@ Use [the changelog guidelines](https://git.io/polaris-changelog-guidelines) to f
 
 - Updated `react` and `react-dom` to version 16.14.0. This is now the minimum version of React required to use the `@shopify/polaris` library.
 - Dropping support for node 10.x
+- Made `autoComplete` prop in `TextField` a required string ([#4267](https://github.com/Shopify/polaris-react/pull/4267)). If you do not want the browser to autofill a user's information (for example an email input which is a customer's email, but not the email of the user who is entering the information), we reccomend setting `autoComplete` to `"nope"`.
 
 ### Enhancements
 
diff --git a/examples/create-react-app-ts-react-testing/src/App.tsx b/examples/create-react-app-ts-react-testing/src/App.tsx
index 3bdbb40f06a..b7a9e445fb6 100644
--- a/examples/create-react-app-ts-react-testing/src/App.tsx
+++ b/examples/create-react-app-ts-react-testing/src/App.tsx
@@ -99,12 +99,14 @@ export function App() {
                   label="First name"
                   placeholder="Tom"
                   onChange={handleFirstChange}
+                  autoComplete="given-name"
                 />
                 <TextField
                   value={last}
                   label="Last name"
                   placeholder="Ford"
                   onChange={handleLastChange}
+                  autoComplete="family-name"
                 />
               </FormLayout.Group>
 
@@ -113,6 +115,7 @@ export function App() {
                 label="Email"
                 placeholder="example@email.com"
                 onChange={handleEmailChange}
+                autoComplete="email"
               />
 
               <ChoiceList
diff --git a/examples/create-react-app/src/App.js b/examples/create-react-app/src/App.js
index d4af13d515c..d32f5f846af 100644
--- a/examples/create-react-app/src/App.js
+++ b/examples/create-react-app/src/App.js
@@ -92,12 +92,14 @@ export function App() {
                   label="First name"
                   placeholder="Tom"
                   onChange={handleFirstChange}
+                  autoComplete="given-name"
                 />
                 <TextField
                   value={last}
                   label="Last name"
                   placeholder="Ford"
                   onChange={handleLastChange}
+                  autoComplete="family-name"
                 />
               </FormLayout.Group>
 
@@ -106,6 +108,7 @@ export function App() {
                 label="Email"
                 placeholder="example@email.com"
                 onChange={handleEmailChange}
+                autoComplete="email"
               />
 
               <ChoiceList
diff --git a/examples/next.js/pages/index.js b/examples/next.js/pages/index.js
index 60180f28b36..a8780ae6957 100644
--- a/examples/next.js/pages/index.js
+++ b/examples/next.js/pages/index.js
@@ -29,12 +29,9 @@ export default function App() {
     [],
   );
 
-  const toggleConnection = useCallback(
-    () => {
-      setConnected(!connected);
-    },
-    [connected],
-  );
+  const toggleConnection = useCallback(() => {
+    setConnected(!connected);
+  }, [connected]);
 
   const breadcrumbs = [{content: 'Sample apps'}, {content: 'next.js'}];
   const primaryAction = {content: 'New product'};
@@ -95,12 +92,14 @@ export default function App() {
                   label="First name"
                   placeholder="Tom"
                   onChange={handleFirstChange}
+                  autoComplete="given-name"
                 />
                 <TextField
                   value={last}
                   label="Last name"
                   placeholder="Ford"
                   onChange={handleLastChange}
+                  autoComplete="family-name"
                 />
               </FormLayout.Group>
 
@@ -109,6 +108,7 @@ export default function App() {
                 label="Email"
                 placeholder="example@email.com"
                 onChange={handleEmailChange}
+                autoComplete="email"
               />
 
               <ChoiceList
diff --git a/examples/webpack/src/App.js b/examples/webpack/src/App.js
index 1d82d125258..2ad0521454b 100644
--- a/examples/webpack/src/App.js
+++ b/examples/webpack/src/App.js
@@ -29,12 +29,9 @@ export default function App() {
     [],
   );
 
-  const toggleConnection = useCallback(
-    () => {
-      setConnected(!connected);
-    },
-    [connected],
-  );
+  const toggleConnection = useCallback(() => {
+    setConnected(!connected);
+  }, [connected]);
 
   const breadcrumbs = [{content: 'Sample apps'}, {content: 'webpack'}];
   const primaryAction = {content: 'New product'};
@@ -95,12 +92,14 @@ export default function App() {
                   label="First name"
                   placeholder="Tom"
                   onChange={handleFirstChange}
+                  autoComplete="given-name"
                 />
                 <TextField
                   value={last}
                   label="Last name"
                   placeholder="Ford"
                   onChange={handleLastChange}
+                  autoComplete="family-name"
                 />
               </FormLayout.Group>
 
@@ -109,6 +108,7 @@ export default function App() {
                 label="Email"
                 placeholder="example@email.com"
                 onChange={handleEmailChange}
+                autoComplete="email"
               />
 
               <ChoiceList
diff --git a/playground/DetailsPage.tsx b/playground/DetailsPage.tsx
index 686d54048d5..1bcc2800f41 100644
--- a/playground/DetailsPage.tsx
+++ b/playground/DetailsPage.tsx
@@ -577,11 +577,13 @@ export function DetailsPage() {
                 label="Title"
                 value="M60-A"
                 onChange={() => setIsDirty(true)}
+                autoComplete="nope"
               />
               <TextField
                 label="Description"
                 value={descriptionValue}
                 onChange={handleChange}
+                autoComplete="nope"
                 multiline
               />
             </FormLayout>
@@ -653,11 +655,13 @@ export function DetailsPage() {
             label="Subject"
             value={supportSubject}
             onChange={handleSubjectChange}
+            autoComplete="nope"
           />
           <TextField
             label="Message"
             value={supportMessage}
             onChange={handleMessageChange}
+            autoComplete="nope"
             multiline
           />
         </FormLayout>
diff --git a/src/components/Autocomplete/components/ComboBox/tests/ComboBox.test.tsx b/src/components/Autocomplete/components/ComboBox/tests/ComboBox.test.tsx
index dd7de0edffc..6b85712b65e 100644
--- a/src/components/Autocomplete/components/ComboBox/tests/ComboBox.test.tsx
+++ b/src/components/Autocomplete/components/ComboBox/tests/ComboBox.test.tsx
@@ -621,7 +621,7 @@ describe('<ComboBox/>', () => {
 function noop() {}
 
 function renderTextField() {
-  return <TextField label="" onChange={noop} />;
+  return <TextField label="" onChange={noop} autoComplete="nope" />;
 }
 
 function renderNodeWithId() {
diff --git a/src/components/Autocomplete/components/TextField/TextField.tsx b/src/components/Autocomplete/components/TextField/TextField.tsx
index 5597c8b7988..a8975f550a9 100644
--- a/src/components/Autocomplete/components/TextField/TextField.tsx
+++ b/src/components/Autocomplete/components/TextField/TextField.tsx
@@ -11,7 +11,7 @@ export function TextField(props: TextFieldProps) {
         <BaseTextField
           {...props}
           role="combobox"
-          autoComplete={false}
+          autoComplete="nope"
           ariaAutocomplete="list"
           ariaActiveDescendant={selectedOptionId}
           ariaControls={comboBoxId}
diff --git a/src/components/Autocomplete/tests/Autocomplete.test.tsx b/src/components/Autocomplete/tests/Autocomplete.test.tsx
index bfc942b6623..52836124f6b 100644
--- a/src/components/Autocomplete/tests/Autocomplete.test.tsx
+++ b/src/components/Autocomplete/tests/Autocomplete.test.tsx
@@ -151,7 +151,9 @@ describe('<Autocomplete/>', () => {
   function noop() {}
 
   function renderTextField() {
-    return <Autocomplete.TextField label="" onChange={noop} />;
+    return (
+      <Autocomplete.TextField label="" onChange={noop} autoComplete="nope" />
+    );
   }
 
   function handleOnSelect(this: any, updatedSelection: string[]) {
diff --git a/src/components/ChoiceList/README.md b/src/components/ChoiceList/README.md
index e63693e2903..5fe38f5705f 100644
--- a/src/components/ChoiceList/README.md
+++ b/src/components/ChoiceList/README.md
@@ -322,6 +322,7 @@ function SingleOrMultiChoiceListWithChildrenContextExample() {
         labelHidden
         onChange={handleTextFieldChange}
         value={textFieldValue}
+        autoComplete="nope"
       />
     ),
     [handleTextFieldChange, textFieldValue],
@@ -372,6 +373,7 @@ function SingleOrMultuChoiceListWithChildrenContextWhenSelectedExample() {
           labelHidden
           onChange={handleTextFieldChange}
           value={textFieldValue}
+          autoComplete="nope"
         />
       ),
     [handleTextFieldChange, textFieldValue],
diff --git a/src/components/Filters/Filters.tsx b/src/components/Filters/Filters.tsx
index ad65dab43d2..a9efe1bf107 100644
--- a/src/components/Filters/Filters.tsx
+++ b/src/components/Filters/Filters.tsx
@@ -287,6 +287,7 @@ class FiltersInner extends Component<CombinedProps, State> {
             clearButton
             onClearButtonClick={onQueryClear}
             disabled={disabled}
+            autoComplete="off"
           />
         )}
       </ConnectedFilterControl>
diff --git a/src/components/Filters/README.md b/src/components/Filters/README.md
index e4880e96c7e..01206a37c5b 100644
--- a/src/components/Filters/README.md
+++ b/src/components/Filters/README.md
@@ -211,6 +211,7 @@ function ResourceListFiltersExample() {
           label="Tagged with"
           value={taggedWith}
           onChange={handleTaggedWithChange}
+          autoComplete="nope"
           labelHidden
         />
       ),
@@ -423,6 +424,7 @@ function DataTableFiltersExample() {
           label="Tagged with"
           value={taggedWith}
           onChange={handleTaggedWithChange}
+          autoComplete="nope"
           labelHidden
         />
       ),
@@ -555,6 +557,7 @@ function FiltersExample() {
           label="Tagged with"
           value={taggedWith}
           onChange={handleTaggedWithChange}
+          autoComplete="nope"
           labelHidden
         />
       ),
@@ -681,6 +684,7 @@ function DisableAllFiltersExample() {
           label="Tagged with"
           value={taggedWith}
           onChange={handleTaggedWithChange}
+          autoComplete="nope"
           labelHidden
         />
       ),
@@ -816,6 +820,7 @@ function DisableSomeFiltersExample() {
           label="Tagged with"
           value={taggedWith}
           onChange={handleTaggedWithChange}
+          autoComplete="nope"
           labelHidden
         />
       ),
@@ -829,6 +834,7 @@ function DisableSomeFiltersExample() {
           label="Vendor"
           value={vendor}
           onChange={handleVendorChange}
+          autoComplete="nope"
           labelHidden
         />
       ),
@@ -960,6 +966,7 @@ function Playground() {
           label="Tagged with"
           value={taggedWith}
           onChange={handleTaggedWithChange}
+          autoComplete="nope"
           labelHidden
         />
       ),
@@ -1131,6 +1138,7 @@ function ResourceListFiltersExample() {
           label="Tagged with"
           value={taggedWith}
           onChange={handleTaggedWithChange}
+          autoComplete="nope"
           labelHidden
         />
       ),
@@ -1331,6 +1339,7 @@ function ResourceListFiltersExample() {
           label="Tagged with"
           value={taggedWith}
           onChange={handleTaggedWithChange}
+          autoComplete="nope"
           labelHidden
         />
       ),
diff --git a/src/components/Form/README.md b/src/components/Form/README.md
index 15ba3eefef2..9318a6fcd2a 100644
--- a/src/components/Form/README.md
+++ b/src/components/Form/README.md
@@ -65,6 +65,7 @@ function FormOnSubmitExample() {
           onChange={handleEmailChange}
           label="Email"
           type="email"
+          autoComplete="email"
           helpText={
             <span>
               We’ll use this email address to inform you on future changes to
@@ -100,6 +101,7 @@ function FormWithoutNativeValidationExample() {
           onChange={handleUrlChange}
           label="App URL"
           type="url"
+          autoComplete="nope"
         />
 
         <Button submit>Submit</Button>
diff --git a/src/components/FormLayout/README.md b/src/components/FormLayout/README.md
index 0a56066ecd1..24bd2f5aa63 100644
--- a/src/components/FormLayout/README.md
+++ b/src/components/FormLayout/README.md
@@ -102,8 +102,13 @@ Use to stack form fields vertically, which makes them easier to scan and complet
 
 ```jsx
 <FormLayout>
-  <TextField label="Store name" onChange={() => {}} />
-  <TextField type="email" label="Account email" onChange={() => {}} />
+  <TextField label="Store name" onChange={() => {}} autoComplete="nope" />
+  <TextField
+    type="email"
+    label="Account email"
+    onChange={() => {}}
+    autoComplete="email"
+  />
 </FormLayout>
 ```
 
@@ -130,8 +135,18 @@ Field groups will wrap automatically on smaller screens.
 ```jsx
 <FormLayout>
   <FormLayout.Group>
-    <TextField type="number" label="Minimum order" onChange={() => {}} />
-    <TextField type="number" label="Maximum order" onChange={() => {}} />
+    <TextField
+      type="number"
+      label="Minimum order"
+      onChange={() => {}}
+      autoComplete="nope"
+    />
+    <TextField
+      type="number"
+      label="Maximum order"
+      onChange={() => {}}
+      autoComplete="nope"
+    />
   </FormLayout.Group>
 </FormLayout>
 ```
@@ -157,10 +172,10 @@ For very short inputs, the width of the inputs may be reduced in order to fit mo
 ```jsx
 <FormLayout>
   <FormLayout.Group condensed>
-    <TextField label="Length" onChange={() => {}} />
-    <TextField label="Width" onChange={() => {}} />
-    <TextField label="Height" onChange={() => {}} />
-    <TextField label="Unit" onChange={() => {}} />
+    <TextField label="Length" onChange={() => {}} autoComplete="nope" />
+    <TextField label="Width" onChange={() => {}} autoComplete="nope" />
+    <TextField label="Height" onChange={() => {}} autoComplete="nope" />
+    <TextField label="Unit" onChange={() => {}} autoComplete="nope" />
   </FormLayout.Group>
 </FormLayout>
 ```
diff --git a/src/components/FormLayout/components/Group/tests/Group.test.tsx b/src/components/FormLayout/components/Group/tests/Group.test.tsx
index ef592a2fbcc..44b1ff8511d 100644
--- a/src/components/FormLayout/components/Group/tests/Group.test.tsx
+++ b/src/components/FormLayout/components/Group/tests/Group.test.tsx
@@ -12,7 +12,7 @@ describe('<Group />', () => {
   let item: any;
 
   beforeAll(() => {
-    children = <TextField onChange={noop} label="test" />;
+    children = <TextField onChange={noop} label="test" autoComplete="nope" />;
     title = 'Title';
     helpText = 'Help text';
     item = mountWithAppProvider(
diff --git a/src/components/FormLayout/components/Item/tests/Item.test.tsx b/src/components/FormLayout/components/Item/tests/Item.test.tsx
index cb7d28448cc..ce80ac09bca 100644
--- a/src/components/FormLayout/components/Item/tests/Item.test.tsx
+++ b/src/components/FormLayout/components/Item/tests/Item.test.tsx
@@ -7,7 +7,9 @@ import {Item} from '../Item';
 
 describe('<Item />', () => {
   it('renders its children', () => {
-    const children = <TextField onChange={noop} label="test" />;
+    const children = (
+      <TextField onChange={noop} label="test" autoComplete="nope" />
+    );
     const item = mountWithAppProvider(<Item>{children}</Item>);
     expect(item.contains(children)).toBe(true);
   });
diff --git a/src/components/FormLayout/tests/FormLayout.test.tsx b/src/components/FormLayout/tests/FormLayout.test.tsx
index 016dc0ca970..3ff865ac88e 100644
--- a/src/components/FormLayout/tests/FormLayout.test.tsx
+++ b/src/components/FormLayout/tests/FormLayout.test.tsx
@@ -7,7 +7,9 @@ import {FormLayout} from '../FormLayout';
 
 describe('<FormLayout />', () => {
   it('renders its children', () => {
-    const children = <TextField onChange={noop} label="test" />;
+    const children = (
+      <TextField onChange={noop} label="test" autoComplete="nope" />
+    );
     const formLayout = mountWithAppProvider(
       <FormLayout>{children}</FormLayout>,
     );
diff --git a/src/components/Frame/README.md b/src/components/Frame/README.md
index 2725d9c6c9c..9d0912dba95 100644
--- a/src/components/Frame/README.md
+++ b/src/components/Frame/README.md
@@ -245,12 +245,14 @@ function FrameExample() {
                 label="Full name"
                 value={nameFieldValue}
                 onChange={handleNameFieldChange}
+                autoComplete="name"
               />
               <TextField
                 type="email"
                 label="Email"
                 value={emailFieldValue}
                 onChange={handleEmailFieldChange}
+                autoComplete="email"
               />
             </FormLayout>
           </Card>
@@ -292,11 +294,13 @@ function FrameExample() {
             label="Subject"
             value={supportSubject}
             onChange={handleSubjectChange}
+            autoComplete="nope"
           />
           <TextField
             label="Message"
             value={supportMessage}
             onChange={handleMessageChange}
+            autoComplete="nope"
             multiline
           />
         </FormLayout>
@@ -579,12 +583,14 @@ function FrameExample() {
                 label="Full name"
                 value={nameFieldValue}
                 onChange={handleNameFieldChange}
+                autoComplete="name"
               />
               <TextField
                 type="email"
                 label="Email"
                 value={emailFieldValue}
                 onChange={handleEmailFieldChange}
+                autoComplete="email"
               />
             </FormLayout>
           </Card>
@@ -626,11 +632,13 @@ function FrameExample() {
             label="Subject"
             value={supportSubject}
             onChange={handleSubjectChange}
+            autoComplete="nope"
           />
           <TextField
             label="Message"
             value={supportMessage}
             onChange={handleMessageChange}
+            autoComplete="nope"
             multiline
           />
         </FormLayout>
diff --git a/src/components/IndexTable/README.md b/src/components/IndexTable/README.md
index 7c69e72bb47..781eabebe1c 100644
--- a/src/components/IndexTable/README.md
+++ b/src/components/IndexTable/README.md
@@ -603,6 +603,7 @@ function IndexTableWithFilteringExample() {
           label="Tagged with"
           value={taggedWith}
           onChange={handleTaggedWithChange}
+          autoComplete="nope"
           labelHidden
         />
       ),
@@ -864,6 +865,7 @@ function IndexTableWithAllElementsExample() {
           label="Tagged with"
           value={taggedWith}
           onChange={handleTaggedWithChange}
+          autoComplete="nope"
           labelHidden
         />
       ),
@@ -1049,6 +1051,7 @@ function SmallScreenIndexTableWithAllElementsExample() {
           label="Tagged with"
           value={taggedWith}
           onChange={handleTaggedWithChange}
+          autoComplete="nope"
           labelHidden
         />
       ),
diff --git a/src/components/Layout/README.md b/src/components/Layout/README.md
index af5a543b6a1..3c815c89bed 100644
--- a/src/components/Layout/README.md
+++ b/src/components/Layout/README.md
@@ -416,8 +416,13 @@ Use for settings pages. When settings are grouped thematically in annotated sect
   >
     <Card sectioned>
       <FormLayout>
-        <TextField label="Store name" onChange={() => {}} />
-        <TextField type="email" label="Account email" onChange={() => {}} />
+        <TextField label="Store name" onChange={() => {}} autoComplete="nope" />
+        <TextField
+          type="email"
+          label="Account email"
+          onChange={() => {}}
+          autoComplete="email"
+        />
       </FormLayout>
     </Card>
   </Layout.AnnotatedSection>
@@ -441,8 +446,13 @@ Use for settings pages that need a banner or other content at the top.
   >
     <Card sectioned>
       <FormLayout>
-        <TextField label="Store name" onChange={() => {}} />
-        <TextField type="email" label="Account email" onChange={() => {}} />
+        <TextField label="Store name" onChange={() => {}} autoComplete="nope" />
+        <TextField
+          type="email"
+          label="Account email"
+          onChange={() => {}}
+          autoComplete="email"
+        />
       </FormLayout>
     </Card>
   </Layout.AnnotatedSection>
diff --git a/src/components/Modal/README.md b/src/components/Modal/README.md
index 35500d4c463..6cdf4987617 100644
--- a/src/components/Modal/README.md
+++ b/src/components/Modal/README.md
@@ -369,6 +369,7 @@ function ModalWithPrimaryActionExample() {
                 onFocus={handleFocus}
                 value={DISCOUNT_LINK}
                 onChange={() => {}}
+                autoComplete="nope"
                 connectedRight={
                   <Button primary onClick={handleClick}>
                     Copy link
diff --git a/src/components/Pagination/tests/Pagination.test.tsx b/src/components/Pagination/tests/Pagination.test.tsx
index 1babc944a22..a0f6fa475b4 100644
--- a/src/components/Pagination/tests/Pagination.test.tsx
+++ b/src/components/Pagination/tests/Pagination.test.tsx
@@ -188,7 +188,12 @@ describe('<Pagination />', () => {
       const spy = jest.fn();
       const wrapper = mountWithAppProvider(
         <div>
-          <TextField label="test" value="" onChange={noop} />
+          <TextField
+            label="test"
+            value=""
+            onChange={noop}
+            autoComplete="nope"
+          />
           <Pagination
             nextTooltip="j"
             previousKeys={[Key.KeyJ]}
diff --git a/src/components/Popover/README.md b/src/components/Popover/README.md
index 8b3d4e51f8b..972c2edbaf2 100644
--- a/src/components/Popover/README.md
+++ b/src/components/Popover/README.md
@@ -263,6 +263,7 @@ function PopoverFormExample() {
             label="Tags"
             value={tagValue}
             onChange={handleTagValueChange}
+            autoComplete="nope"
           />
           <Button size="slim">Add filter</Button>
         </FormLayout>
diff --git a/src/components/Popover/components/PopoverOverlay/tests/PopoverOverlay.test.tsx b/src/components/Popover/components/PopoverOverlay/tests/PopoverOverlay.test.tsx
index 34255fe5b3e..68d386bfd89 100644
--- a/src/components/Popover/components/PopoverOverlay/tests/PopoverOverlay.test.tsx
+++ b/src/components/Popover/components/PopoverOverlay/tests/PopoverOverlay.test.tsx
@@ -236,7 +236,14 @@ describe('<PopoverOverlay />', () => {
         activator={activator}
         onClose={spy}
       >
-        (<TextField label="Store name" value="Click me" onChange={() => {}} />)
+        (
+        <TextField
+          label="Store name"
+          value="Click me"
+          onChange={() => {}}
+          autoComplete="nope"
+        />
+        )
       </PopoverOverlay>,
     );
 
@@ -267,6 +274,7 @@ describe('<PopoverOverlay />', () => {
           label="Store name"
           value="Click me"
           onChange={() => {}}
+          autoComplete="nope"
         />
         )
       </PopoverOverlay>,
diff --git a/src/components/RangeSlider/README.md b/src/components/RangeSlider/README.md
index 07b4dc7efe6..7c2d726a874 100644
--- a/src/components/RangeSlider/README.md
+++ b/src/components/RangeSlider/README.md
@@ -352,6 +352,7 @@ function DualThumbRangeSliderExample() {
             step={step}
             onChange={handleLowerTextFieldChange}
             onBlur={handleLowerTextFieldBlur}
+            autoComplete="nope"
           />
           <TextField
             label="Max money spent"
@@ -363,6 +364,7 @@ function DualThumbRangeSliderExample() {
             step={step}
             onChange={handleUpperTextFieldChange}
             onBlur={handleUpperTextFieldBlur}
+            autoComplete="nope"
           />
         </Stack>
       </div>
diff --git a/src/components/ResourceList/README.md b/src/components/ResourceList/README.md
index 0dfbc97453e..64e28839c19 100644
--- a/src/components/ResourceList/README.md
+++ b/src/components/ResourceList/README.md
@@ -595,6 +595,7 @@ function ResourceListWithFilteringExample() {
           label="Tagged with"
           value={taggedWith}
           onChange={handleTaggedWithChange}
+          autoComplete="nope"
           labelHidden
         />
       ),
@@ -710,6 +711,7 @@ function ResourceListWithFilteringExample() {
           label="Tagged with"
           value={taggedWith}
           onChange={handleTaggedWithChange}
+          autoComplete="nope"
           labelHidden
         />
       ),
@@ -1094,6 +1096,7 @@ function ResourceListExample() {
           label="Tagged with"
           value={taggedWith}
           onChange={handleTaggedWithChange}
+          autoComplete="nope"
           labelHidden
         />
       ),
diff --git a/src/components/ResourceList/components/FilterControl/FilterControl.tsx b/src/components/ResourceList/components/FilterControl/FilterControl.tsx
index e88283077ad..04f6d2c144a 100644
--- a/src/components/ResourceList/components/FilterControl/FilterControl.tsx
+++ b/src/components/ResourceList/components/FilterControl/FilterControl.tsx
@@ -159,6 +159,7 @@ export function FilterControl({
         onBlur={onSearchBlur}
         focused={focused}
         disabled={selectMode}
+        autoComplete="nope"
       />
       {appliedFiltersWrapper}
     </FormLayout>
diff --git a/src/components/ResourceList/components/FilterControl/components/DateSelector/DateSelector.tsx b/src/components/ResourceList/components/FilterControl/components/DateSelector/DateSelector.tsx
index df2a817bead..4cda6d11254 100644
--- a/src/components/ResourceList/components/FilterControl/components/DateSelector/DateSelector.tsx
+++ b/src/components/ResourceList/components/FilterControl/components/DateSelector/DateSelector.tsx
@@ -202,7 +202,7 @@ export const DateSelector = memo(function DateSelector({
           value={dateTextFieldValue}
           error={userInputDateError}
           prefix={<Icon source={CalendarMinor} color="subdued" />}
-          autoComplete={false}
+          autoComplete="nope"
           onChange={handleDateFieldChange}
           onBlur={handleDateBlur}
         />
diff --git a/src/components/ResourceList/components/FilterControl/components/FilterValueSelector/FilterValueSelector.tsx b/src/components/ResourceList/components/FilterControl/components/FilterValueSelector/FilterValueSelector.tsx
index ef0c53bf5b0..deef87d5025 100644
--- a/src/components/ResourceList/components/FilterControl/components/FilterValueSelector/FilterValueSelector.tsx
+++ b/src/components/ResourceList/components/FilterControl/components/FilterValueSelector/FilterValueSelector.tsx
@@ -86,6 +86,7 @@ export function FilterValueSelector({
             value={value}
             type={filter.textFieldType}
             onChange={onChange}
+            autoComplete="nope"
           />
         </Stack>
       );
diff --git a/src/components/Select/README.md b/src/components/Select/README.md
index 778f35b1e93..5da8a53fc8d 100644
--- a/src/components/Select/README.md
+++ b/src/components/Select/README.md
@@ -294,6 +294,7 @@ function SeparateValidationErrorExample() {
             value={weight}
             onChange={handleWeightChange}
             error={Boolean(!weight && unit)}
+            autoComplete="nope"
           />
           <Select
             id={unitSelectID}
diff --git a/src/components/Spinner/README.md b/src/components/Spinner/README.md
index dd2df44e3c5..fc3a23b7455 100644
--- a/src/components/Spinner/README.md
+++ b/src/components/Spinner/README.md
@@ -109,6 +109,7 @@ function SpinnerWithFocusManagement() {
           focused={textFieldFocused}
           onChange={handleUrlChange}
           label={label}
+          autoComplete="nope"
         />
         <Button submit>Submit</Button>
       </FormLayout>
diff --git a/src/components/TextField/README.md b/src/components/TextField/README.md
index da6c5b5eebc..dd6765c9e67 100644
--- a/src/components/TextField/README.md
+++ b/src/components/TextField/README.md
@@ -179,7 +179,14 @@ function TextFieldExample() {
 
   const handleChange = useCallback((newValue) => setValue(newValue), []);
 
-  return <TextField label="Store name" value={value} onChange={handleChange} />;
+  return (
+    <TextField
+      label="Store name"
+      value={value}
+      onChange={handleChange}
+      autoComplete="nope"
+    />
+  );
 }
 ```
 
@@ -211,6 +218,7 @@ function NumberFieldExample() {
       type="number"
       value={value}
       onChange={handleChange}
+      autoComplete="nope"
     />
   );
 }
@@ -248,6 +256,7 @@ function EmailFieldExample() {
       type="email"
       value={value}
       onChange={handleChange}
+      autoComplete="email"
     />
   );
 }
@@ -285,6 +294,7 @@ function MultilineFieldExample() {
       value={value}
       onChange={handleChange}
       multiline={4}
+      autoComplete="nope"
     />
   );
 }
@@ -338,6 +348,7 @@ function HiddenLabelExample() {
         value={value}
         disabled={selected === 'no'}
         onChange={handleTextChange}
+        autoComplete="nope"
         connectedRight={
           <Select
             label="Unit of time"
@@ -372,6 +383,7 @@ function LabelActionExample() {
       value={textFieldValue}
       onChange={handleTextFieldChange}
       labelAction={{content: 'Look up codes'}}
+      autoComplete="nope"
     />
   );
 }
@@ -400,6 +412,7 @@ function RightAlignExample() {
         labelHidden
         value={textFieldValue}
         onChange={handleTextFieldChange}
+        autoComplete="nope"
         align="right"
       />
     </Stack>
@@ -426,6 +439,7 @@ function PlaceholderExample() {
       value={textFieldValue}
       onChange={handleTextFieldChange}
       placeholder="Example: North America, Europe"
+      autoComplete="nope"
     />
   );
 }
@@ -465,6 +479,7 @@ function HelpTextExample() {
       value={textFieldValue}
       onChange={handleTextFieldChange}
       helpText="We’ll use this address if we need to contact you about your account."
+      autoComplete="email"
     />
   );
 }
@@ -505,6 +520,7 @@ function PrefixExample() {
       value={textFieldValue}
       onChange={handleTextFieldChange}
       prefix="$"
+      autoComplete="nope"
     />
   );
 }
@@ -550,6 +566,7 @@ function ConnectedFieldsExample() {
       type="number"
       value={textFieldValue}
       onChange={handleTextFieldChange}
+      autoComplete="nope"
       connectedLeft={
         <Select
           value={selectValue}
@@ -620,6 +637,7 @@ function ValidationErrorExample() {
       value={textFieldValue}
       onChange={handleTextFieldChange}
       error="Store name is required"
+      autoComplete="nope"
     />
   );
 }
@@ -706,6 +724,7 @@ function SeparateValidationErrorExample() {
               id={textFieldID}
               value={textFieldValue}
               onChange={handleTextFieldValueChange}
+              autoComplete="nope"
             />
           </FormLayout.Group>
         </FormLayout>
@@ -740,7 +759,7 @@ function SeparateValidationErrorExample() {
 Use to show that a textfield is not available for interaction. Most often used in forms when information is required only in a particular state. For example, the text field next to Other in a choice list when Other is not selected.
 
 ```jsx
-<TextField label="Store name" disabled />
+<TextField label="Store name" disabled autoComplete="nope" />
 ```
 
 ### Text field with character count
@@ -764,6 +783,7 @@ function TextFieldWithCharacterCountExample() {
       value={textFieldValue}
       onChange={handleTextFieldChange}
       maxLength={20}
+      autoComplete="nope"
       showCharacterCount
     />
   );
@@ -794,6 +814,7 @@ function TextFieldWithClearButtonExample() {
       onChange={handleTextFieldChange}
       clearButton
       onClearButtonClick={handleClearButtonClick}
+      autoComplete="nope"
     />
   );
 }
diff --git a/src/components/TextField/TextField.tsx b/src/components/TextField/TextField.tsx
index 45b56584cfd..a55ffa97399 100644
--- a/src/components/TextField/TextField.tsx
+++ b/src/components/TextField/TextField.tsx
@@ -92,8 +92,8 @@ interface NonMutuallyExclusiveProps {
   role?: string;
   /** Limit increment value for numeric and date-time inputs */
   step?: number;
-  /** Enable automatic completion by the browser */
-  autoComplete?: boolean | string;
+  /** Enable automatic completion by the browser. Set to "nope" when you do not want the browser to fill in info */
+  autoComplete: string;
   /** Mimics the behavior of the native HTML attribute, limiting the maximum value */
   max?: number | string;
   /** Maximum character length for an input */
@@ -417,7 +417,7 @@ export function TextField({
     onBlur,
     onKeyPress: handleKeyPress,
     style,
-    autoComplete: normalizeAutoComplete(autoComplete),
+    autoComplete,
     className: inputClassName,
     onChange: handleChange,
     ref: inputRef,
@@ -522,16 +522,6 @@ export function TextField({
   }
 }
 
-function normalizeAutoComplete(autoComplete?: boolean | string) {
-  if (autoComplete === true) {
-    return 'on';
-  } else if (autoComplete === false) {
-    return 'off';
-  } else {
-    return autoComplete;
-  }
-}
-
 function normalizeAriaMultiline(multiline?: boolean | number) {
   if (!multiline) return undefined;
 
diff --git a/src/components/TextField/tests/TextField.test.tsx b/src/components/TextField/tests/TextField.test.tsx
index 980c7814f1f..48c5f433997 100644
--- a/src/components/TextField/tests/TextField.test.tsx
+++ b/src/components/TextField/tests/TextField.test.tsx
@@ -29,6 +29,7 @@ describe('<TextField />', () => {
         pattern={pattern}
         inputMode={inputMode}
         align="left"
+        autoComplete="name"
       />,
     ).find('input');
 
@@ -45,6 +46,7 @@ describe('<TextField />', () => {
     expect(input.prop('spellCheck')).toBe(false);
     expect(input.prop('pattern')).toBe(pattern);
     expect(input.prop('inputMode')).toBe(inputMode);
+    expect(input.prop('autoComplete')).toBe('name');
   });
 
   it('blocks props not listed as component props to pass on the input', () => {
@@ -58,6 +60,7 @@ describe('<TextField />', () => {
         placeholder="A placeholder"
         value="Some value"
         prefix="test-prefix"
+        autoComplete="off"
       />,
     ).find('input');
 
@@ -66,7 +69,7 @@ describe('<TextField />', () => {
 
   it('always has an `aria-labelledby` property', () => {
     const textField = mountWithAppProvider(
-      <TextField label="TextField" onChange={noop} />,
+      <TextField label="TextField" onChange={noop} autoComplete="off" />,
     );
     const property = textField.find('input').prop('aria-labelledby');
 
@@ -77,7 +80,12 @@ describe('<TextField />', () => {
     it('is called with the new value', () => {
       const spy = jest.fn();
       const element = mountWithAppProvider(
-        <TextField id="MyTextField" label="TextField" onChange={spy} />,
+        <TextField
+          id="MyTextField"
+          label="TextField"
+          onChange={spy}
+          autoComplete="off"
+        />,
       );
       (element.find('input') as any).instance().value = 'two';
       element.find('input').simulate('change');
@@ -89,7 +97,12 @@ describe('<TextField />', () => {
     it('is called when the input is focused', () => {
       const spy = jest.fn();
       mountWithApp(
-        <TextField label="TextField" onFocus={spy} onChange={noop} />,
+        <TextField
+          label="TextField"
+          onFocus={spy}
+          onChange={noop}
+          autoComplete="off"
+        />,
       )
         .find('input')!
         .trigger('onFocus');
@@ -101,7 +114,12 @@ describe('<TextField />', () => {
     it('is called when the input is blurred', () => {
       const spy = jest.fn();
       const element = mountWithAppProvider(
-        <TextField label="TextField" onBlur={spy} onChange={noop} />,
+        <TextField
+          label="TextField"
+          onBlur={spy}
+          onChange={noop}
+          autoComplete="off"
+        />,
       );
       element.find('input').simulate('focus');
       element.find('input').simulate('blur');
@@ -112,7 +130,12 @@ describe('<TextField />', () => {
   describe('id', () => {
     it('sets the id on the input', () => {
       const id = mountWithAppProvider(
-        <TextField label="TextField" id="MyField" onChange={noop} />,
+        <TextField
+          label="TextField"
+          id="MyField"
+          onChange={noop}
+          autoComplete="off"
+        />,
       )
         .find('input')
         .prop('id');
@@ -121,7 +144,7 @@ describe('<TextField />', () => {
 
     it('sets a random id on the input when none is passed', () => {
       const id = mountWithAppProvider(
-        <TextField label="TextField" onChange={noop} />,
+        <TextField label="TextField" onChange={noop} autoComplete="off" />,
       )
         .find('input')
         .prop('id');
@@ -132,7 +155,7 @@ describe('<TextField />', () => {
     it('updates with the new id from props', () => {
       const id = 'input field';
       const textField = mountWithAppProvider(
-        <TextField label="TextField" onChange={noop} />,
+        <TextField label="TextField" onChange={noop} autoComplete="off" />,
       );
       textField.setProps({id});
       expect(textField.find('input').prop('id')).toBe(id);
@@ -141,7 +164,12 @@ describe('<TextField />', () => {
     it('updates with the previous id after the id prop has been removed', () => {
       const id = 'input field';
       const textField = mountWithAppProvider(
-        <TextField label="TextField" id={id} onChange={noop} />,
+        <TextField
+          label="TextField"
+          id={id}
+          onChange={noop}
+          autoComplete="off"
+        />,
       );
       textField.setProps({});
       expect(textField.find('input').prop('id')).toBe(id);
@@ -151,7 +179,12 @@ describe('<TextField />', () => {
   describe('focused', () => {
     it('input is in focus state if focused is true', () => {
       const element = mountWithApp(
-        <TextField label="TextField" onChange={noop} focused />,
+        <TextField
+          label="TextField"
+          onChange={noop}
+          autoComplete="off"
+          focused
+        />,
       );
 
       expect(document.activeElement).toBe(element.find('input')!.domNode);
@@ -159,7 +192,7 @@ describe('<TextField />', () => {
 
     it('focuses input if focused is toggled', () => {
       const element = mountWithApp(
-        <TextField label="TextField" onChange={noop} />,
+        <TextField label="TextField" onChange={noop} autoComplete="off" />,
       );
 
       element.setProps({focused: true});
@@ -169,7 +202,12 @@ describe('<TextField />', () => {
 
     it('blurs input if focused is toggled', () => {
       const element = mountWithApp(
-        <TextField label="TextField" onChange={noop} focused />,
+        <TextField
+          label="TextField"
+          onChange={noop}
+          autoComplete="off"
+          focused
+        />,
       );
 
       element.setProps({focused: false});
@@ -179,28 +217,7 @@ describe('<TextField />', () => {
   });
 
   describe('autoComplete', () => {
-    it('defaults to no autoComplete attribute', () => {
-      const textField = mountWithAppProvider(
-        <TextField label="TextField" onChange={noop} />,
-      );
-      expect(textField.find('input').prop('autoComplete')).toBeUndefined();
-    });
-
-    it('sets autoComplete to "off" when false', () => {
-      const textField = mountWithAppProvider(
-        <TextField label="TextField" autoComplete={false} onChange={noop} />,
-      );
-      expect(textField.find('input').prop('autoComplete')).toBe('off');
-    });
-
-    it('sets autoComplete to "on" when true', () => {
-      const textField = mountWithAppProvider(
-        <TextField label="TextField" autoComplete onChange={noop} />,
-      );
-      expect(textField.find('input').prop('autoComplete')).toBe('on');
-    });
-
-    it('sets autoComplete to string value when string is given', () => {
+    it('is passed to input as autoComplete', () => {
       const textField = mountWithAppProvider(
         <TextField
           label="TextField"
@@ -215,7 +232,12 @@ describe('<TextField />', () => {
   describe('helpText', () => {
     it('connects the input to the help text', () => {
       const textField = mountWithAppProvider(
-        <TextField label="TextField" helpText="Some help" onChange={noop} />,
+        <TextField
+          label="TextField"
+          helpText="Some help"
+          onChange={noop}
+          autoComplete="off"
+        />,
       );
       const helpTextID = textField
         .find('input')
@@ -232,6 +254,7 @@ describe('<TextField />', () => {
           error={<span>Invalid</span>}
           label="TextField"
           onChange={noop}
+          autoComplete="off"
         />,
       );
       expect(textField.find('input').prop<string>('aria-invalid')).toBe(true);
@@ -242,7 +265,12 @@ describe('<TextField />', () => {
 
     it('connects the input to the error', () => {
       const textField = mountWithAppProvider(
-        <TextField label="TextField" error="Some error" onChange={noop} />,
+        <TextField
+          label="TextField"
+          error="Some error"
+          onChange={noop}
+          autoComplete="off"
+        />,
       );
       const errorID = textField.find('input').prop<string>('aria-describedby');
       expect(typeof errorID).toBe('string');
@@ -259,6 +287,7 @@ describe('<TextField />', () => {
             id={textFieldID}
             label="textField"
             onChange={noop}
+            autoComplete="off"
           />
           <InlineError message={errorMessage} fieldID={textFieldID} />
         </div>,
@@ -279,6 +308,7 @@ describe('<TextField />', () => {
           error="Some error"
           helpText="Some help"
           onChange={noop}
+          autoComplete="off"
         />,
       );
       const descriptions = textField
@@ -297,6 +327,7 @@ describe('<TextField />', () => {
           label="TextField"
           helpText="Some help"
           onChange={noop}
+          autoComplete="off"
         />,
       );
 
@@ -310,7 +341,12 @@ describe('<TextField />', () => {
   describe('prefix', () => {
     it('connects the input to the prefix and label', () => {
       const textField = mountWithAppProvider(
-        <TextField label="TextField" prefix="$" onChange={noop} />,
+        <TextField
+          label="TextField"
+          prefix="$"
+          onChange={noop}
+          autoComplete="off"
+        />,
       );
       const labels = textField
         .find('input')
@@ -323,7 +359,13 @@ describe('<TextField />', () => {
 
     it('connects the input to the prefix, suffix, and label', () => {
       const textField = mountWithAppProvider(
-        <TextField label="TextField" prefix="$" suffix=".00" onChange={noop} />,
+        <TextField
+          label="TextField"
+          prefix="$"
+          suffix=".00"
+          onChange={noop}
+          autoComplete="off"
+        />,
       );
       const labels = textField
         .find('input')
@@ -346,6 +388,7 @@ describe('<TextField />', () => {
           label="TextField"
           prefix={mockPrefixButton}
           onChange={noop}
+          autoComplete="off"
         />,
       );
 
@@ -365,6 +408,7 @@ describe('<TextField />', () => {
           label="TextField"
           prefix={mockPrefixButton}
           onChange={noop}
+          autoComplete="off"
         />,
       );
 
@@ -382,7 +426,12 @@ describe('<TextField />', () => {
   describe('suffix', () => {
     it('connects the input to the suffix and label', () => {
       const textField = mountWithAppProvider(
-        <TextField label="TextField" suffix="kg" onChange={noop} />,
+        <TextField
+          label="TextField"
+          suffix="kg"
+          onChange={noop}
+          autoComplete="off"
+        />,
       );
       const labels = textField
         .find('input')
@@ -404,6 +453,7 @@ describe('<TextField />', () => {
           label="TextField"
           suffix={mockSuffixButton}
           onChange={noop}
+          autoComplete="off"
         />,
       );
 
@@ -423,6 +473,7 @@ describe('<TextField />', () => {
           label="TextField"
           suffix={mockSuffixButton}
           onChange={noop}
+          autoComplete="off"
         />,
       );
 
@@ -446,6 +497,7 @@ describe('<TextField />', () => {
           label="TextField"
           id="MyField"
           onChange={noop}
+          autoComplete="off"
         />,
       );
 
@@ -463,6 +515,7 @@ describe('<TextField />', () => {
           label="TextField"
           id="MyField"
           onChange={noop}
+          autoComplete="off"
         />,
       );
 
@@ -479,6 +532,7 @@ describe('<TextField />', () => {
           label="TextField"
           id="MyField"
           onChange={noop}
+          autoComplete="off"
         />,
       );
 
@@ -496,7 +550,12 @@ describe('<TextField />', () => {
   describe('type', () => {
     it('sets the type on the input', () => {
       const type = mountWithAppProvider(
-        <TextField label="TextField" type="email" onChange={noop} />,
+        <TextField
+          label="TextField"
+          type="email"
+          onChange={noop}
+          autoComplete="off"
+        />,
       )
         .find('input')
         .prop('type');
@@ -513,6 +572,7 @@ describe('<TextField />', () => {
             type="number"
             value="3"
             onChange={spy}
+            autoComplete="off"
           />,
         );
         element.find('[role="button"]').first().simulate('click');
@@ -528,6 +588,7 @@ describe('<TextField />', () => {
             type="number"
             value="3"
             onChange={spy}
+            autoComplete="off"
           />,
         );
         element.find('[role="button"]').last().simulate('click');
@@ -543,6 +604,7 @@ describe('<TextField />', () => {
             type="number"
             value="not a number"
             onChange={spy}
+            autoComplete="off"
           />,
         );
 
@@ -563,6 +625,7 @@ describe('<TextField />', () => {
             label="TextField"
             type="number"
             onChange={spy}
+            autoComplete="off"
           />,
         );
         element.find('[role="button"]').first().simulate('click');
@@ -578,6 +641,7 @@ describe('<TextField />', () => {
             step={6}
             value="4"
             onChange={noop}
+            autoComplete="off"
           />,
         );
         expect(element.find('input').prop('step')).toBe(6);
@@ -593,6 +657,7 @@ describe('<TextField />', () => {
             step={0.5}
             value="1.25"
             onChange={spy}
+            autoComplete="off"
           />,
         );
         element.find('[role="button"]').first().simulate('click');
@@ -609,6 +674,7 @@ describe('<TextField />', () => {
             min={2}
             value="2"
             onChange={spy}
+            autoComplete="off"
           />,
         );
 
@@ -629,6 +695,7 @@ describe('<TextField />', () => {
             max={2}
             value="2"
             onChange={spy}
+            autoComplete="off"
           />,
         );
 
@@ -649,6 +716,7 @@ describe('<TextField />', () => {
             min={2}
             value="-1"
             onChange={spy}
+            autoComplete="off"
           />,
         );
 
@@ -669,6 +737,7 @@ describe('<TextField />', () => {
             max={2}
             value="12"
             onChange={spy}
+            autoComplete="off"
           />,
         );
 
@@ -685,6 +754,7 @@ describe('<TextField />', () => {
             id="MyNumberField"
             label="NumberField"
             type="number"
+            autoComplete="off"
             disabled
           />,
         );
@@ -698,6 +768,7 @@ describe('<TextField />', () => {
             id="MyNumberField"
             label="NumberField"
             type="number"
+            autoComplete="off"
             readOnly
           />,
         );
@@ -713,6 +784,7 @@ describe('<TextField />', () => {
             type="number"
             step={0}
             onChange={spy}
+            autoComplete="off"
           />,
         );
         expect(element.find(Spinner)).toHaveLength(0);
@@ -728,6 +800,7 @@ describe('<TextField />', () => {
             value="3.02"
             step={1.044}
             onChange={spy}
+            autoComplete="off"
           />,
         );
         element.find('[role="button"]').first().simulate('click');
@@ -744,6 +817,7 @@ describe('<TextField />', () => {
             value="3.02"
             step={1.044}
             onChange={spy}
+            autoComplete="off"
           />,
         );
         element.find('[role="button"]').last().simulate('click');
@@ -760,6 +834,7 @@ describe('<TextField />', () => {
             type="number"
             value="3"
             onChange={spy}
+            autoComplete="off"
           />,
         );
         element
@@ -781,6 +856,7 @@ describe('<TextField />', () => {
             type="number"
             value="3"
             onChange={spy}
+            autoComplete="off"
           />,
         );
         element
@@ -822,6 +898,7 @@ describe('<TextField />', () => {
               type="number"
               value="3"
               onChange={spy}
+              autoComplete="off"
             />,
           );
           element
@@ -840,14 +917,25 @@ describe('<TextField />', () => {
   describe('multiline', () => {
     it('does not render a resizer if `multiline` is false', () => {
       const textField = mountWithAppProvider(
-        <TextField label="TextField" id="MyField" onChange={noop} />,
+        <TextField
+          label="TextField"
+          id="MyField"
+          onChange={noop}
+          autoComplete="off"
+        />,
       );
       expect(textField.find(Resizer).exists()).toBe(false);
     });
 
     it('renders a resizer with `minimumLines` set to 1 if `multiline` is true', () => {
       const textField = mountWithApp(
-        <TextField label="TextField" id="MyField" onChange={noop} multiline />,
+        <TextField
+          label="TextField"
+          id="MyField"
+          onChange={noop}
+          autoComplete="off"
+          multiline
+        />,
       );
       expect(textField).toContainReactComponentTimes(Resizer, 1, {
         minimumLines: 1,
@@ -861,6 +949,7 @@ describe('<TextField />', () => {
           id="MyField"
           onChange={noop}
           multiline={5}
+          autoComplete="off"
         />,
       );
 
@@ -878,6 +967,7 @@ describe('<TextField />', () => {
           onChange={noop}
           placeholder={placeholderText}
           multiline={5}
+          autoComplete="off"
         />,
       );
 
@@ -899,6 +989,7 @@ describe('<TextField />', () => {
           ariaActiveDescendant="Aria active descendant"
           ariaAutocomplete="Aria autocomplete"
           ariaControls="Aria controls"
+          autoComplete="off"
         />,
       );
 
@@ -926,6 +1017,7 @@ describe('<TextField />', () => {
           ariaActiveDescendant="Aria active descendant"
           ariaAutocomplete="Aria autocomplete"
           ariaControls="Aria controls"
+          autoComplete="off"
         />,
       );
       expect(textField.find('textarea').prop('aria-multiline')).toBe(true);
@@ -942,6 +1034,7 @@ describe('<TextField />', () => {
           ariaActiveDescendant="Aria active descendant"
           ariaAutocomplete="Aria autocomplete"
           ariaControls="Aria controls"
+          autoComplete="off"
         />,
       );
       expect(textField.find('input').prop('aria-multiline')).toBeUndefined();
@@ -957,6 +1050,7 @@ describe('<TextField />', () => {
           ariaActiveDescendant="Aria active descendant"
           ariaAutocomplete="Aria autocomplete"
           ariaControls="Aria controls"
+          autoComplete="off"
         />,
       );
       expect(textField.find('input').prop('aria-multiline')).toBeUndefined();
@@ -971,6 +1065,7 @@ describe('<TextField />', () => {
           id="MyField"
           onChange={noop}
           helpText="Help text"
+          autoComplete="off"
         />,
       );
 
@@ -982,7 +1077,13 @@ describe('<TextField />', () => {
 
     it('passes error to Labelled', () => {
       const textField = mountWithAppProvider(
-        <TextField label="TextField" id="MyField" onChange={noop} error />,
+        <TextField
+          label="TextField"
+          id="MyField"
+          onChange={noop}
+          autoComplete="off"
+          error
+        />,
       );
 
       expect(textField.find(Labelled).prop('error')).toBe(true);
@@ -994,6 +1095,7 @@ describe('<TextField />', () => {
           label="TextField"
           id="MyField"
           onChange={noop}
+          autoComplete="off"
           labelHidden
         />,
       );
@@ -1027,6 +1129,7 @@ describe('<TextField />', () => {
           onChange={noop}
           connectedLeft={connectedLeft}
           connectedRight={connectedRight}
+          autoComplete="off"
           prefix
         />,
       );
@@ -1042,7 +1145,7 @@ describe('<TextField />', () => {
 
     it('sets focus to the <input /> `onClick`', () => {
       const textField = mountWithApp(
-        <TextField label="TextField" onChange={noop} />,
+        <TextField label="TextField" onChange={noop} autoComplete="off" />,
       );
 
       expect(document.activeElement).not.toBe(textField.find('input')!.domNode);
@@ -1062,6 +1165,7 @@ describe('<TextField />', () => {
           onChange={noop}
           type="text"
           value="test value"
+          autoComplete="off"
           clearButton
         />,
       );
@@ -1075,6 +1179,7 @@ describe('<TextField />', () => {
           label="TextField"
           type="text"
           onChange={noop}
+          autoComplete="off"
           clearButton
         />,
       );
@@ -1094,6 +1199,7 @@ describe('<TextField />', () => {
           onChange={noop}
           onClearButtonClick={spy}
           value="test value"
+          autoComplete="off"
           clearButton
         />,
       );
@@ -1109,6 +1215,7 @@ describe('<TextField />', () => {
           onChange={noop}
           type="text"
           value="test value"
+          autoComplete="off"
         />,
       );
       expect(findByTestID(textField, 'clearButton').exists()).toBeFalsy();
@@ -1121,6 +1228,7 @@ describe('<TextField />', () => {
           onChange={noop}
           connectedLeft={<div />}
           connectedRight={<div />}
+          autoComplete="off"
         />,
       );
       expect(textField).toContainReactComponent('div', {
@@ -1132,7 +1240,12 @@ describe('<TextField />', () => {
   describe('requiredIndicator', () => {
     it('passes requiredIndicator prop to Labelled', () => {
       const element = mountWithAppProvider(
-        <TextField label="TextField" onChange={noop} requiredIndicator />,
+        <TextField
+          label="TextField"
+          onChange={noop}
+          autoComplete="off"
+          requiredIndicator
+        />,
       );
       const labelled = element.find(Labelled);
 
@@ -1143,14 +1256,24 @@ describe('<TextField />', () => {
   describe('monospaced', () => {
     it('passes monospaced prop to TextField', () => {
       const element = mountWithAppProvider(
-        <TextField label="TextField" onChange={noop} monospaced />,
+        <TextField
+          label="TextField"
+          onChange={noop}
+          monospaced
+          autoComplete="nope"
+        />,
       );
       expect(element.prop('monospaced')).toBe(true);
     });
 
     it('applies the monospaced style', () => {
       const input = mountWithAppProvider(
-        <TextField label="TextField" onChange={noop} monospaced />,
+        <TextField
+          label="TextField"
+          onChange={noop}
+          monospaced
+          autoComplete="nope"
+        />,
       ).find('input');
 
       expect(input.prop('className')).toContain('monospaced');
diff --git a/src/components/Tooltip/README.md b/src/components/Tooltip/README.md
index e8b9cb81071..bf467274c44 100644
--- a/src/components/Tooltip/README.md
+++ b/src/components/Tooltip/README.md
@@ -94,7 +94,7 @@ Use when the tooltip overlays interactive elements when active, for example a fo
       <Button>S</Button>
     </Tooltip>
   </ButtonGroup>
-  <TextField label="Product title" labelHidden multiline />
+  <TextField label="Product title" autoComplete="nope" labelHidden multiline />
 </div>
 ```
 
diff --git a/src/components/TrapFocus/tests/TrapFocus.test.tsx b/src/components/TrapFocus/tests/TrapFocus.test.tsx
index 9d4711508d3..e42b71d3e04 100644
--- a/src/components/TrapFocus/tests/TrapFocus.test.tsx
+++ b/src/components/TrapFocus/tests/TrapFocus.test.tsx
@@ -113,7 +113,13 @@ describe('<TrapFocus />', () => {
     const trapFocus = mountWithApp(
       <TrapFocus>
         <button>First node</button>
-        <TextField label="" value="" onChange={noop} autoFocus />
+        <TextField
+          label=""
+          value=""
+          autoComplete="nope"
+          onChange={noop}
+          autoFocus
+        />
       </TrapFocus>,
     );
 
@@ -124,7 +130,7 @@ describe('<TrapFocus />', () => {
     const trapFocus = mountWithApp(
       <TrapFocus>
         <a href="/">
-          <TextField label="" value="" onChange={noop} />
+          <TextField label="" value="" autoComplete="nope" onChange={noop} />
         </a>
       </TrapFocus>,
     );
@@ -159,7 +165,13 @@ describe('<TrapFocus />', () => {
     it('allows default when trapping is false', () => {
       const trapFocus = mountWithApp(
         <TrapFocus trapping={false}>
-          <TextField label="" value="" onChange={noop} autoFocus />
+          <TextField
+            label=""
+            value=""
+            autoComplete="nope"
+            onChange={noop}
+            autoFocus
+          />
         </TrapFocus>,
       );
 
@@ -175,7 +187,13 @@ describe('<TrapFocus />', () => {
     it('allows default when the related target is a child', () => {
       const trapFocus = mountWithApp(
         <TrapFocus>
-          <TextField label="" value="" onChange={noop} autoFocus />
+          <TextField
+            label=""
+            value=""
+            autoComplete="nope"
+            onChange={noop}
+            autoFocus
+          />
         </TrapFocus>,
       );
 
diff --git a/src/components/VisuallyHidden/README.md b/src/components/VisuallyHidden/README.md
index bf47e597366..a264affff02 100644
--- a/src/components/VisuallyHidden/README.md
+++ b/src/components/VisuallyHidden/README.md
@@ -51,8 +51,14 @@ Always provide a heading for a major page section such as a card. In rare cases
       label="Title"
       value="Artisanal Wooden Spoon"
       onChange={() => {}}
+      autoComplete="nope"
+    />
+    <TextField
+      label="Description"
+      multiline
+      onChange={() => {}}
+      autoComplete="nope"
     />
-    <TextField label="Description" multiline onChange={() => {}} />
   </FormLayout>
 </Card>
 ```

From b604ebf0e7b891ce3a0c602c77f9efa96f87d0da Mon Sep 17 00:00:00 2001
From: Andrew McGoveran <andrew.mcgoveran@shopify.com>
Date: Mon, 28 Jun 2021 17:11:24 -0400
Subject: [PATCH 2/4] switch to autoComplete="off" as default

---
 UNRELEASED.md                                 |  2 +-
 playground/DetailsPage.tsx                    |  8 +++---
 .../ComboBox/tests/ComboBox.test.tsx          |  2 +-
 .../components/TextField/TextField.tsx        |  2 +-
 .../Autocomplete/tests/Autocomplete.test.tsx  |  2 +-
 src/components/ChoiceList/README.md           |  4 +--
 src/components/Filters/README.md              | 18 ++++++------
 src/components/Form/README.md                 |  2 +-
 src/components/FormLayout/README.md           | 14 +++++-----
 .../components/Group/tests/Group.test.tsx     |  2 +-
 .../components/Item/tests/Item.test.tsx       |  2 +-
 .../FormLayout/tests/FormLayout.test.tsx      |  2 +-
 src/components/Frame/README.md                |  8 +++---
 src/components/IndexTable/README.md           |  6 ++--
 src/components/Layout/README.md               |  4 +--
 src/components/Modal/README.md                |  2 +-
 .../Pagination/tests/Pagination.test.tsx      |  7 +----
 src/components/Popover/README.md              |  2 +-
 .../tests/PopoverOverlay.test.tsx             |  4 +--
 src/components/RangeSlider/README.md          |  4 +--
 src/components/ResourceList/README.md         |  6 ++--
 .../FilterControl/FilterControl.tsx           |  2 +-
 .../components/DateSelector/DateSelector.tsx  |  2 +-
 .../FilterValueSelector.tsx                   |  2 +-
 src/components/Select/README.md               |  2 +-
 src/components/Spinner/README.md              |  2 +-
 src/components/TextField/README.md            | 28 +++++++++----------
 src/components/TextField/TextField.tsx        |  2 +-
 .../TextField/tests/TextField.test.tsx        |  5 ++--
 src/components/Tooltip/README.md              |  2 +-
 .../TrapFocus/tests/TrapFocus.test.tsx        |  8 +++---
 src/components/VisuallyHidden/README.md       |  4 +--
 32 files changed, 79 insertions(+), 83 deletions(-)

diff --git a/UNRELEASED.md b/UNRELEASED.md
index ad4c78f2d95..2ec5de018c5 100644
--- a/UNRELEASED.md
+++ b/UNRELEASED.md
@@ -6,7 +6,7 @@ Use [the changelog guidelines](https://git.io/polaris-changelog-guidelines) to f
 
 - Updated `react` and `react-dom` to version 16.14.0. This is now the minimum version of React required to use the `@shopify/polaris` library.
 - Dropping support for node 10.x
-- Made `autoComplete` prop in `TextField` a required string ([#4267](https://github.com/Shopify/polaris-react/pull/4267)). If you do not want the browser to autofill a user's information (for example an email input which is a customer's email, but not the email of the user who is entering the information), we reccomend setting `autoComplete` to `"nope"`.
+- Made `autoComplete` prop in `TextField` a required string ([#4267](https://github.com/Shopify/polaris-react/pull/4267)). If you do not want the browser to autofill a user's information (for example an email input which is a customer's email, but not the email of the user who is entering the information), we recommend setting `autoComplete` to `"off"`.
 
 ### Enhancements
 
diff --git a/playground/DetailsPage.tsx b/playground/DetailsPage.tsx
index 1bcc2800f41..838a7aa8c22 100644
--- a/playground/DetailsPage.tsx
+++ b/playground/DetailsPage.tsx
@@ -577,13 +577,13 @@ export function DetailsPage() {
                 label="Title"
                 value="M60-A"
                 onChange={() => setIsDirty(true)}
-                autoComplete="nope"
+                autoComplete="off"
               />
               <TextField
                 label="Description"
                 value={descriptionValue}
                 onChange={handleChange}
-                autoComplete="nope"
+                autoComplete="off"
                 multiline
               />
             </FormLayout>
@@ -655,13 +655,13 @@ export function DetailsPage() {
             label="Subject"
             value={supportSubject}
             onChange={handleSubjectChange}
-            autoComplete="nope"
+            autoComplete="off"
           />
           <TextField
             label="Message"
             value={supportMessage}
             onChange={handleMessageChange}
-            autoComplete="nope"
+            autoComplete="off"
             multiline
           />
         </FormLayout>
diff --git a/src/components/Autocomplete/components/ComboBox/tests/ComboBox.test.tsx b/src/components/Autocomplete/components/ComboBox/tests/ComboBox.test.tsx
index 6b85712b65e..44e5be9514b 100644
--- a/src/components/Autocomplete/components/ComboBox/tests/ComboBox.test.tsx
+++ b/src/components/Autocomplete/components/ComboBox/tests/ComboBox.test.tsx
@@ -621,7 +621,7 @@ describe('<ComboBox/>', () => {
 function noop() {}
 
 function renderTextField() {
-  return <TextField label="" onChange={noop} autoComplete="nope" />;
+  return <TextField label="" onChange={noop} autoComplete="off" />;
 }
 
 function renderNodeWithId() {
diff --git a/src/components/Autocomplete/components/TextField/TextField.tsx b/src/components/Autocomplete/components/TextField/TextField.tsx
index a8975f550a9..880fe3513da 100644
--- a/src/components/Autocomplete/components/TextField/TextField.tsx
+++ b/src/components/Autocomplete/components/TextField/TextField.tsx
@@ -11,7 +11,7 @@ export function TextField(props: TextFieldProps) {
         <BaseTextField
           {...props}
           role="combobox"
-          autoComplete="nope"
+          autoComplete="off"
           ariaAutocomplete="list"
           ariaActiveDescendant={selectedOptionId}
           ariaControls={comboBoxId}
diff --git a/src/components/Autocomplete/tests/Autocomplete.test.tsx b/src/components/Autocomplete/tests/Autocomplete.test.tsx
index 52836124f6b..95f141d0988 100644
--- a/src/components/Autocomplete/tests/Autocomplete.test.tsx
+++ b/src/components/Autocomplete/tests/Autocomplete.test.tsx
@@ -152,7 +152,7 @@ describe('<Autocomplete/>', () => {
 
   function renderTextField() {
     return (
-      <Autocomplete.TextField label="" onChange={noop} autoComplete="nope" />
+      <Autocomplete.TextField label="" onChange={noop} autoComplete="off" />
     );
   }
 
diff --git a/src/components/ChoiceList/README.md b/src/components/ChoiceList/README.md
index 5fe38f5705f..87b417f0cc2 100644
--- a/src/components/ChoiceList/README.md
+++ b/src/components/ChoiceList/README.md
@@ -322,7 +322,7 @@ function SingleOrMultiChoiceListWithChildrenContextExample() {
         labelHidden
         onChange={handleTextFieldChange}
         value={textFieldValue}
-        autoComplete="nope"
+        autoComplete="off"
       />
     ),
     [handleTextFieldChange, textFieldValue],
@@ -373,7 +373,7 @@ function SingleOrMultuChoiceListWithChildrenContextWhenSelectedExample() {
           labelHidden
           onChange={handleTextFieldChange}
           value={textFieldValue}
-          autoComplete="nope"
+          autoComplete="off"
         />
       ),
     [handleTextFieldChange, textFieldValue],
diff --git a/src/components/Filters/README.md b/src/components/Filters/README.md
index 01206a37c5b..fcfb3d4d003 100644
--- a/src/components/Filters/README.md
+++ b/src/components/Filters/README.md
@@ -211,7 +211,7 @@ function ResourceListFiltersExample() {
           label="Tagged with"
           value={taggedWith}
           onChange={handleTaggedWithChange}
-          autoComplete="nope"
+          autoComplete="off"
           labelHidden
         />
       ),
@@ -424,7 +424,7 @@ function DataTableFiltersExample() {
           label="Tagged with"
           value={taggedWith}
           onChange={handleTaggedWithChange}
-          autoComplete="nope"
+          autoComplete="off"
           labelHidden
         />
       ),
@@ -557,7 +557,7 @@ function FiltersExample() {
           label="Tagged with"
           value={taggedWith}
           onChange={handleTaggedWithChange}
-          autoComplete="nope"
+          autoComplete="off"
           labelHidden
         />
       ),
@@ -684,7 +684,7 @@ function DisableAllFiltersExample() {
           label="Tagged with"
           value={taggedWith}
           onChange={handleTaggedWithChange}
-          autoComplete="nope"
+          autoComplete="off"
           labelHidden
         />
       ),
@@ -820,7 +820,7 @@ function DisableSomeFiltersExample() {
           label="Tagged with"
           value={taggedWith}
           onChange={handleTaggedWithChange}
-          autoComplete="nope"
+          autoComplete="off"
           labelHidden
         />
       ),
@@ -834,7 +834,7 @@ function DisableSomeFiltersExample() {
           label="Vendor"
           value={vendor}
           onChange={handleVendorChange}
-          autoComplete="nope"
+          autoComplete="off"
           labelHidden
         />
       ),
@@ -966,7 +966,7 @@ function Playground() {
           label="Tagged with"
           value={taggedWith}
           onChange={handleTaggedWithChange}
-          autoComplete="nope"
+          autoComplete="off"
           labelHidden
         />
       ),
@@ -1138,7 +1138,7 @@ function ResourceListFiltersExample() {
           label="Tagged with"
           value={taggedWith}
           onChange={handleTaggedWithChange}
-          autoComplete="nope"
+          autoComplete="off"
           labelHidden
         />
       ),
@@ -1339,7 +1339,7 @@ function ResourceListFiltersExample() {
           label="Tagged with"
           value={taggedWith}
           onChange={handleTaggedWithChange}
-          autoComplete="nope"
+          autoComplete="off"
           labelHidden
         />
       ),
diff --git a/src/components/Form/README.md b/src/components/Form/README.md
index 9318a6fcd2a..4faf1c6b79f 100644
--- a/src/components/Form/README.md
+++ b/src/components/Form/README.md
@@ -101,7 +101,7 @@ function FormWithoutNativeValidationExample() {
           onChange={handleUrlChange}
           label="App URL"
           type="url"
-          autoComplete="nope"
+          autoComplete="off"
         />
 
         <Button submit>Submit</Button>
diff --git a/src/components/FormLayout/README.md b/src/components/FormLayout/README.md
index 24bd2f5aa63..7e0870bf5c7 100644
--- a/src/components/FormLayout/README.md
+++ b/src/components/FormLayout/README.md
@@ -102,7 +102,7 @@ Use to stack form fields vertically, which makes them easier to scan and complet
 
 ```jsx
 <FormLayout>
-  <TextField label="Store name" onChange={() => {}} autoComplete="nope" />
+  <TextField label="Store name" onChange={() => {}} autoComplete="off" />
   <TextField
     type="email"
     label="Account email"
@@ -139,13 +139,13 @@ Field groups will wrap automatically on smaller screens.
       type="number"
       label="Minimum order"
       onChange={() => {}}
-      autoComplete="nope"
+      autoComplete="off"
     />
     <TextField
       type="number"
       label="Maximum order"
       onChange={() => {}}
-      autoComplete="nope"
+      autoComplete="off"
     />
   </FormLayout.Group>
 </FormLayout>
@@ -172,10 +172,10 @@ For very short inputs, the width of the inputs may be reduced in order to fit mo
 ```jsx
 <FormLayout>
   <FormLayout.Group condensed>
-    <TextField label="Length" onChange={() => {}} autoComplete="nope" />
-    <TextField label="Width" onChange={() => {}} autoComplete="nope" />
-    <TextField label="Height" onChange={() => {}} autoComplete="nope" />
-    <TextField label="Unit" onChange={() => {}} autoComplete="nope" />
+    <TextField label="Length" onChange={() => {}} autoComplete="off" />
+    <TextField label="Width" onChange={() => {}} autoComplete="off" />
+    <TextField label="Height" onChange={() => {}} autoComplete="off" />
+    <TextField label="Unit" onChange={() => {}} autoComplete="off" />
   </FormLayout.Group>
 </FormLayout>
 ```
diff --git a/src/components/FormLayout/components/Group/tests/Group.test.tsx b/src/components/FormLayout/components/Group/tests/Group.test.tsx
index 44b1ff8511d..dbe1e5cb3a7 100644
--- a/src/components/FormLayout/components/Group/tests/Group.test.tsx
+++ b/src/components/FormLayout/components/Group/tests/Group.test.tsx
@@ -12,7 +12,7 @@ describe('<Group />', () => {
   let item: any;
 
   beforeAll(() => {
-    children = <TextField onChange={noop} label="test" autoComplete="nope" />;
+    children = <TextField onChange={noop} label="test" autoComplete="off" />;
     title = 'Title';
     helpText = 'Help text';
     item = mountWithAppProvider(
diff --git a/src/components/FormLayout/components/Item/tests/Item.test.tsx b/src/components/FormLayout/components/Item/tests/Item.test.tsx
index ce80ac09bca..895f980beb6 100644
--- a/src/components/FormLayout/components/Item/tests/Item.test.tsx
+++ b/src/components/FormLayout/components/Item/tests/Item.test.tsx
@@ -8,7 +8,7 @@ import {Item} from '../Item';
 describe('<Item />', () => {
   it('renders its children', () => {
     const children = (
-      <TextField onChange={noop} label="test" autoComplete="nope" />
+      <TextField onChange={noop} label="test" autoComplete="off" />
     );
     const item = mountWithAppProvider(<Item>{children}</Item>);
     expect(item.contains(children)).toBe(true);
diff --git a/src/components/FormLayout/tests/FormLayout.test.tsx b/src/components/FormLayout/tests/FormLayout.test.tsx
index 3ff865ac88e..f79ce9a08c5 100644
--- a/src/components/FormLayout/tests/FormLayout.test.tsx
+++ b/src/components/FormLayout/tests/FormLayout.test.tsx
@@ -8,7 +8,7 @@ import {FormLayout} from '../FormLayout';
 describe('<FormLayout />', () => {
   it('renders its children', () => {
     const children = (
-      <TextField onChange={noop} label="test" autoComplete="nope" />
+      <TextField onChange={noop} label="test" autoComplete="off" />
     );
     const formLayout = mountWithAppProvider(
       <FormLayout>{children}</FormLayout>,
diff --git a/src/components/Frame/README.md b/src/components/Frame/README.md
index 9d0912dba95..bde4a651b9c 100644
--- a/src/components/Frame/README.md
+++ b/src/components/Frame/README.md
@@ -294,13 +294,13 @@ function FrameExample() {
             label="Subject"
             value={supportSubject}
             onChange={handleSubjectChange}
-            autoComplete="nope"
+            autoComplete="off"
           />
           <TextField
             label="Message"
             value={supportMessage}
             onChange={handleMessageChange}
-            autoComplete="nope"
+            autoComplete="off"
             multiline
           />
         </FormLayout>
@@ -632,13 +632,13 @@ function FrameExample() {
             label="Subject"
             value={supportSubject}
             onChange={handleSubjectChange}
-            autoComplete="nope"
+            autoComplete="off"
           />
           <TextField
             label="Message"
             value={supportMessage}
             onChange={handleMessageChange}
-            autoComplete="nope"
+            autoComplete="off"
             multiline
           />
         </FormLayout>
diff --git a/src/components/IndexTable/README.md b/src/components/IndexTable/README.md
index 781eabebe1c..46c3b1c75a0 100644
--- a/src/components/IndexTable/README.md
+++ b/src/components/IndexTable/README.md
@@ -603,7 +603,7 @@ function IndexTableWithFilteringExample() {
           label="Tagged with"
           value={taggedWith}
           onChange={handleTaggedWithChange}
-          autoComplete="nope"
+          autoComplete="off"
           labelHidden
         />
       ),
@@ -865,7 +865,7 @@ function IndexTableWithAllElementsExample() {
           label="Tagged with"
           value={taggedWith}
           onChange={handleTaggedWithChange}
-          autoComplete="nope"
+          autoComplete="off"
           labelHidden
         />
       ),
@@ -1051,7 +1051,7 @@ function SmallScreenIndexTableWithAllElementsExample() {
           label="Tagged with"
           value={taggedWith}
           onChange={handleTaggedWithChange}
-          autoComplete="nope"
+          autoComplete="off"
           labelHidden
         />
       ),
diff --git a/src/components/Layout/README.md b/src/components/Layout/README.md
index 3c815c89bed..983d61cb9be 100644
--- a/src/components/Layout/README.md
+++ b/src/components/Layout/README.md
@@ -416,7 +416,7 @@ Use for settings pages. When settings are grouped thematically in annotated sect
   >
     <Card sectioned>
       <FormLayout>
-        <TextField label="Store name" onChange={() => {}} autoComplete="nope" />
+        <TextField label="Store name" onChange={() => {}} autoComplete="off" />
         <TextField
           type="email"
           label="Account email"
@@ -446,7 +446,7 @@ Use for settings pages that need a banner or other content at the top.
   >
     <Card sectioned>
       <FormLayout>
-        <TextField label="Store name" onChange={() => {}} autoComplete="nope" />
+        <TextField label="Store name" onChange={() => {}} autoComplete="off" />
         <TextField
           type="email"
           label="Account email"
diff --git a/src/components/Modal/README.md b/src/components/Modal/README.md
index 6cdf4987617..9bf36b32b41 100644
--- a/src/components/Modal/README.md
+++ b/src/components/Modal/README.md
@@ -369,7 +369,7 @@ function ModalWithPrimaryActionExample() {
                 onFocus={handleFocus}
                 value={DISCOUNT_LINK}
                 onChange={() => {}}
-                autoComplete="nope"
+                autoComplete="off"
                 connectedRight={
                   <Button primary onClick={handleClick}>
                     Copy link
diff --git a/src/components/Pagination/tests/Pagination.test.tsx b/src/components/Pagination/tests/Pagination.test.tsx
index a0f6fa475b4..b98cab9d76f 100644
--- a/src/components/Pagination/tests/Pagination.test.tsx
+++ b/src/components/Pagination/tests/Pagination.test.tsx
@@ -188,12 +188,7 @@ describe('<Pagination />', () => {
       const spy = jest.fn();
       const wrapper = mountWithAppProvider(
         <div>
-          <TextField
-            label="test"
-            value=""
-            onChange={noop}
-            autoComplete="nope"
-          />
+          <TextField label="test" value="" onChange={noop} autoComplete="off" />
           <Pagination
             nextTooltip="j"
             previousKeys={[Key.KeyJ]}
diff --git a/src/components/Popover/README.md b/src/components/Popover/README.md
index 972c2edbaf2..70f9f27f1bd 100644
--- a/src/components/Popover/README.md
+++ b/src/components/Popover/README.md
@@ -263,7 +263,7 @@ function PopoverFormExample() {
             label="Tags"
             value={tagValue}
             onChange={handleTagValueChange}
-            autoComplete="nope"
+            autoComplete="off"
           />
           <Button size="slim">Add filter</Button>
         </FormLayout>
diff --git a/src/components/Popover/components/PopoverOverlay/tests/PopoverOverlay.test.tsx b/src/components/Popover/components/PopoverOverlay/tests/PopoverOverlay.test.tsx
index 68d386bfd89..917fd515381 100644
--- a/src/components/Popover/components/PopoverOverlay/tests/PopoverOverlay.test.tsx
+++ b/src/components/Popover/components/PopoverOverlay/tests/PopoverOverlay.test.tsx
@@ -241,7 +241,7 @@ describe('<PopoverOverlay />', () => {
           label="Store name"
           value="Click me"
           onChange={() => {}}
-          autoComplete="nope"
+          autoComplete="off"
         />
         )
       </PopoverOverlay>,
@@ -274,7 +274,7 @@ describe('<PopoverOverlay />', () => {
           label="Store name"
           value="Click me"
           onChange={() => {}}
-          autoComplete="nope"
+          autoComplete="off"
         />
         )
       </PopoverOverlay>,
diff --git a/src/components/RangeSlider/README.md b/src/components/RangeSlider/README.md
index 7c2d726a874..a611bb2169f 100644
--- a/src/components/RangeSlider/README.md
+++ b/src/components/RangeSlider/README.md
@@ -352,7 +352,7 @@ function DualThumbRangeSliderExample() {
             step={step}
             onChange={handleLowerTextFieldChange}
             onBlur={handleLowerTextFieldBlur}
-            autoComplete="nope"
+            autoComplete="off"
           />
           <TextField
             label="Max money spent"
@@ -364,7 +364,7 @@ function DualThumbRangeSliderExample() {
             step={step}
             onChange={handleUpperTextFieldChange}
             onBlur={handleUpperTextFieldBlur}
-            autoComplete="nope"
+            autoComplete="off"
           />
         </Stack>
       </div>
diff --git a/src/components/ResourceList/README.md b/src/components/ResourceList/README.md
index 64e28839c19..4a8baa5eb01 100644
--- a/src/components/ResourceList/README.md
+++ b/src/components/ResourceList/README.md
@@ -595,7 +595,7 @@ function ResourceListWithFilteringExample() {
           label="Tagged with"
           value={taggedWith}
           onChange={handleTaggedWithChange}
-          autoComplete="nope"
+          autoComplete="off"
           labelHidden
         />
       ),
@@ -711,7 +711,7 @@ function ResourceListWithFilteringExample() {
           label="Tagged with"
           value={taggedWith}
           onChange={handleTaggedWithChange}
-          autoComplete="nope"
+          autoComplete="off"
           labelHidden
         />
       ),
@@ -1096,7 +1096,7 @@ function ResourceListExample() {
           label="Tagged with"
           value={taggedWith}
           onChange={handleTaggedWithChange}
-          autoComplete="nope"
+          autoComplete="off"
           labelHidden
         />
       ),
diff --git a/src/components/ResourceList/components/FilterControl/FilterControl.tsx b/src/components/ResourceList/components/FilterControl/FilterControl.tsx
index 04f6d2c144a..ed5d4808b15 100644
--- a/src/components/ResourceList/components/FilterControl/FilterControl.tsx
+++ b/src/components/ResourceList/components/FilterControl/FilterControl.tsx
@@ -159,7 +159,7 @@ export function FilterControl({
         onBlur={onSearchBlur}
         focused={focused}
         disabled={selectMode}
-        autoComplete="nope"
+        autoComplete="off"
       />
       {appliedFiltersWrapper}
     </FormLayout>
diff --git a/src/components/ResourceList/components/FilterControl/components/DateSelector/DateSelector.tsx b/src/components/ResourceList/components/FilterControl/components/DateSelector/DateSelector.tsx
index 4cda6d11254..e4f99bf8dc3 100644
--- a/src/components/ResourceList/components/FilterControl/components/DateSelector/DateSelector.tsx
+++ b/src/components/ResourceList/components/FilterControl/components/DateSelector/DateSelector.tsx
@@ -202,7 +202,7 @@ export const DateSelector = memo(function DateSelector({
           value={dateTextFieldValue}
           error={userInputDateError}
           prefix={<Icon source={CalendarMinor} color="subdued" />}
-          autoComplete="nope"
+          autoComplete="off"
           onChange={handleDateFieldChange}
           onBlur={handleDateBlur}
         />
diff --git a/src/components/ResourceList/components/FilterControl/components/FilterValueSelector/FilterValueSelector.tsx b/src/components/ResourceList/components/FilterControl/components/FilterValueSelector/FilterValueSelector.tsx
index deef87d5025..e07e467b5d8 100644
--- a/src/components/ResourceList/components/FilterControl/components/FilterValueSelector/FilterValueSelector.tsx
+++ b/src/components/ResourceList/components/FilterControl/components/FilterValueSelector/FilterValueSelector.tsx
@@ -86,7 +86,7 @@ export function FilterValueSelector({
             value={value}
             type={filter.textFieldType}
             onChange={onChange}
-            autoComplete="nope"
+            autoComplete="off"
           />
         </Stack>
       );
diff --git a/src/components/Select/README.md b/src/components/Select/README.md
index 5da8a53fc8d..c2c8baa41c3 100644
--- a/src/components/Select/README.md
+++ b/src/components/Select/README.md
@@ -294,7 +294,7 @@ function SeparateValidationErrorExample() {
             value={weight}
             onChange={handleWeightChange}
             error={Boolean(!weight && unit)}
-            autoComplete="nope"
+            autoComplete="off"
           />
           <Select
             id={unitSelectID}
diff --git a/src/components/Spinner/README.md b/src/components/Spinner/README.md
index fc3a23b7455..d22e06baa9d 100644
--- a/src/components/Spinner/README.md
+++ b/src/components/Spinner/README.md
@@ -109,7 +109,7 @@ function SpinnerWithFocusManagement() {
           focused={textFieldFocused}
           onChange={handleUrlChange}
           label={label}
-          autoComplete="nope"
+          autoComplete="off"
         />
         <Button submit>Submit</Button>
       </FormLayout>
diff --git a/src/components/TextField/README.md b/src/components/TextField/README.md
index dd6765c9e67..302a549d4e9 100644
--- a/src/components/TextField/README.md
+++ b/src/components/TextField/README.md
@@ -184,7 +184,7 @@ function TextFieldExample() {
       label="Store name"
       value={value}
       onChange={handleChange}
-      autoComplete="nope"
+      autoComplete="off"
     />
   );
 }
@@ -218,7 +218,7 @@ function NumberFieldExample() {
       type="number"
       value={value}
       onChange={handleChange}
-      autoComplete="nope"
+      autoComplete="off"
     />
   );
 }
@@ -294,7 +294,7 @@ function MultilineFieldExample() {
       value={value}
       onChange={handleChange}
       multiline={4}
-      autoComplete="nope"
+      autoComplete="off"
     />
   );
 }
@@ -348,7 +348,7 @@ function HiddenLabelExample() {
         value={value}
         disabled={selected === 'no'}
         onChange={handleTextChange}
-        autoComplete="nope"
+        autoComplete="off"
         connectedRight={
           <Select
             label="Unit of time"
@@ -383,7 +383,7 @@ function LabelActionExample() {
       value={textFieldValue}
       onChange={handleTextFieldChange}
       labelAction={{content: 'Look up codes'}}
-      autoComplete="nope"
+      autoComplete="off"
     />
   );
 }
@@ -412,7 +412,7 @@ function RightAlignExample() {
         labelHidden
         value={textFieldValue}
         onChange={handleTextFieldChange}
-        autoComplete="nope"
+        autoComplete="off"
         align="right"
       />
     </Stack>
@@ -439,7 +439,7 @@ function PlaceholderExample() {
       value={textFieldValue}
       onChange={handleTextFieldChange}
       placeholder="Example: North America, Europe"
-      autoComplete="nope"
+      autoComplete="off"
     />
   );
 }
@@ -520,7 +520,7 @@ function PrefixExample() {
       value={textFieldValue}
       onChange={handleTextFieldChange}
       prefix="$"
-      autoComplete="nope"
+      autoComplete="off"
     />
   );
 }
@@ -566,7 +566,7 @@ function ConnectedFieldsExample() {
       type="number"
       value={textFieldValue}
       onChange={handleTextFieldChange}
-      autoComplete="nope"
+      autoComplete="off"
       connectedLeft={
         <Select
           value={selectValue}
@@ -637,7 +637,7 @@ function ValidationErrorExample() {
       value={textFieldValue}
       onChange={handleTextFieldChange}
       error="Store name is required"
-      autoComplete="nope"
+      autoComplete="off"
     />
   );
 }
@@ -724,7 +724,7 @@ function SeparateValidationErrorExample() {
               id={textFieldID}
               value={textFieldValue}
               onChange={handleTextFieldValueChange}
-              autoComplete="nope"
+              autoComplete="off"
             />
           </FormLayout.Group>
         </FormLayout>
@@ -759,7 +759,7 @@ function SeparateValidationErrorExample() {
 Use to show that a textfield is not available for interaction. Most often used in forms when information is required only in a particular state. For example, the text field next to Other in a choice list when Other is not selected.
 
 ```jsx
-<TextField label="Store name" disabled autoComplete="nope" />
+<TextField label="Store name" disabled autoComplete="off" />
 ```
 
 ### Text field with character count
@@ -783,7 +783,7 @@ function TextFieldWithCharacterCountExample() {
       value={textFieldValue}
       onChange={handleTextFieldChange}
       maxLength={20}
-      autoComplete="nope"
+      autoComplete="off"
       showCharacterCount
     />
   );
@@ -814,7 +814,7 @@ function TextFieldWithClearButtonExample() {
       onChange={handleTextFieldChange}
       clearButton
       onClearButtonClick={handleClearButtonClick}
-      autoComplete="nope"
+      autoComplete="off"
     />
   );
 }
diff --git a/src/components/TextField/TextField.tsx b/src/components/TextField/TextField.tsx
index a55ffa97399..31c5d62edde 100644
--- a/src/components/TextField/TextField.tsx
+++ b/src/components/TextField/TextField.tsx
@@ -92,7 +92,7 @@ interface NonMutuallyExclusiveProps {
   role?: string;
   /** Limit increment value for numeric and date-time inputs */
   step?: number;
-  /** Enable automatic completion by the browser. Set to "nope" when you do not want the browser to fill in info */
+  /** Enable automatic completion by the browser. Set to "off" when you do not want the browser to fill in info */
   autoComplete: string;
   /** Mimics the behavior of the native HTML attribute, limiting the maximum value */
   max?: number | string;
diff --git a/src/components/TextField/tests/TextField.test.tsx b/src/components/TextField/tests/TextField.test.tsx
index 48c5f433997..7813a3ecbd3 100644
--- a/src/components/TextField/tests/TextField.test.tsx
+++ b/src/components/TextField/tests/TextField.test.tsx
@@ -225,6 +225,7 @@ describe('<TextField />', () => {
           onChange={noop}
         />,
       );
+
       expect(textField.find('input').prop('autoComplete')).toBe('firstName');
     });
   });
@@ -1260,7 +1261,7 @@ describe('<TextField />', () => {
           label="TextField"
           onChange={noop}
           monospaced
-          autoComplete="nope"
+          autoComplete="off"
         />,
       );
       expect(element.prop('monospaced')).toBe(true);
@@ -1272,7 +1273,7 @@ describe('<TextField />', () => {
           label="TextField"
           onChange={noop}
           monospaced
-          autoComplete="nope"
+          autoComplete="off"
         />,
       ).find('input');
 
diff --git a/src/components/Tooltip/README.md b/src/components/Tooltip/README.md
index bf467274c44..e91a2bc8490 100644
--- a/src/components/Tooltip/README.md
+++ b/src/components/Tooltip/README.md
@@ -94,7 +94,7 @@ Use when the tooltip overlays interactive elements when active, for example a fo
       <Button>S</Button>
     </Tooltip>
   </ButtonGroup>
-  <TextField label="Product title" autoComplete="nope" labelHidden multiline />
+  <TextField label="Product title" autoComplete="off" labelHidden multiline />
 </div>
 ```
 
diff --git a/src/components/TrapFocus/tests/TrapFocus.test.tsx b/src/components/TrapFocus/tests/TrapFocus.test.tsx
index e42b71d3e04..0ab42aecee8 100644
--- a/src/components/TrapFocus/tests/TrapFocus.test.tsx
+++ b/src/components/TrapFocus/tests/TrapFocus.test.tsx
@@ -116,7 +116,7 @@ describe('<TrapFocus />', () => {
         <TextField
           label=""
           value=""
-          autoComplete="nope"
+          autoComplete="off"
           onChange={noop}
           autoFocus
         />
@@ -130,7 +130,7 @@ describe('<TrapFocus />', () => {
     const trapFocus = mountWithApp(
       <TrapFocus>
         <a href="/">
-          <TextField label="" value="" autoComplete="nope" onChange={noop} />
+          <TextField label="" value="" autoComplete="off" onChange={noop} />
         </a>
       </TrapFocus>,
     );
@@ -168,7 +168,7 @@ describe('<TrapFocus />', () => {
           <TextField
             label=""
             value=""
-            autoComplete="nope"
+            autoComplete="off"
             onChange={noop}
             autoFocus
           />
@@ -190,7 +190,7 @@ describe('<TrapFocus />', () => {
           <TextField
             label=""
             value=""
-            autoComplete="nope"
+            autoComplete="off"
             onChange={noop}
             autoFocus
           />
diff --git a/src/components/VisuallyHidden/README.md b/src/components/VisuallyHidden/README.md
index a264affff02..a7c39d5d539 100644
--- a/src/components/VisuallyHidden/README.md
+++ b/src/components/VisuallyHidden/README.md
@@ -51,13 +51,13 @@ Always provide a heading for a major page section such as a card. In rare cases
       label="Title"
       value="Artisanal Wooden Spoon"
       onChange={() => {}}
-      autoComplete="nope"
+      autoComplete="off"
     />
     <TextField
       label="Description"
       multiline
       onChange={() => {}}
-      autoComplete="nope"
+      autoComplete="off"
     />
   </FormLayout>
 </Card>

From 9b1c68b92f5764f070940e16194e47dee5930337 Mon Sep 17 00:00:00 2001
From: Genevieve Bulger <genevieve.bulger@shopify.com>
Date: Wed, 30 Jun 2021 09:22:56 -0400
Subject: [PATCH 3/4] Adding off recommendation.

---
 src/components/TextField/README.md | 39 ++++++++++++++++++++++++++++++
 1 file changed, 39 insertions(+)

diff --git a/src/components/TextField/README.md b/src/components/TextField/README.md
index 302a549d4e9..636983c82ef 100644
--- a/src/components/TextField/README.md
+++ b/src/components/TextField/README.md
@@ -64,6 +64,45 @@ Text fields should:
 - Only ask for information that’s really needed
 - Validate input as soon as merchants have finished interacting with a field (but not before)
 
+### Autocomplete
+
+The autocomplete attribute in an `input` field controls two types of browser behavior:
+
+1.  **Browser autofill**: a feature that automatically populates form fields with previously-saved information, such as passwords, addresses, and credit card data.
+
+- Autofill is an important feature for our users. Google has found that ["users complete forms up to 30% faster"](https://developers.google.com/web/updates/2015/06/checkout-faster-with-autofill?hl=en) when using autofill.
+- The WHATWG has a list of supported autofill values for the `autocomplete` attribute. [Review the section "4.10.18.7 Autofill"](https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#autofill) for all the input types and their corresponding autocomplete attribute values.
+
+2. **Browser autocomplete** - a feature that displays previously submitted values for that field.
+
+- When this is on for a field, a user is presented a list with previously submitted values for the input
+
+**Recommendation**
+
+> Always add an autocomplete attribute and value to inputs if the type is: color, date, datetime-local, email, month, number, password, range, search, tel, text, time, url, or week.
+
+#### Turning autofill/autocomplete off
+
+Even if you do not want the browser to autofill a user's information, it is recommended you still have an autocomplete attribute with the value off or nope.
+
+Unfortunately, [not all browsers support](https://caniuse.com/input-autocomplete-onoff) or respect autocomplete="off". This makes things challenging. Chrome, for example, [has a long outstanding bug]9https://bugs.chromium.org/p/chromium/issues/detail?id=468153) and won't add support for off for now.
+
+| Browser | Support for `autocomplete="off"` | Details                                                                                                                                                             |
+| ------- | -------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| Chrome  | Partial                          | Intentionally ignores `off` value when the user uses the browser's autofill functionality. [See bug](https://bugs.chromium.org/p/chromium/issues/detail?id=468153). |
+| Safari  | Partial                          | Ignores `off` value for `username`, `email` and `password` fields.                                                                                                  |
+| Firefox | Partial                          | Ignores `off` value for login forms. [See bug](https://bugzilla.mozilla.org/show_bug.cgi?id=956906).                                                                |
+| Edge    | Partial                          | Intentionally ignores `off` value when the user uses the browser's autofill functionality.                                                                          |
+
+Chrome does seem to turn autocomplete off when using the value nope (or any non valid string). However, we have seen some inconsistencies even with that support.
+
+**Recommendation (Chrome only)**
+
+- Turning off both **autofill** and **browser autocomplete** (previously submitted values) in Chrome
+  - Use `autocomplete=nope` and also **must have a `name` attribute**.
+- Turning off **browser autocomplete** (previously submitted values) in Chrome
+  - If you don't have `name` attribute and the field is not a typical autofill input (address, email, etc), use `autocomplete=off`.
+
 ---
 
 ## Content guidelines

From 82016a0b23de4a289ab733afeadb7efe88b00c59 Mon Sep 17 00:00:00 2001
From: Andrew McGoveran <andrew.mcgoveran@shopify.com>
Date: Wed, 30 Jun 2021 09:42:25 -0400
Subject: [PATCH 4/4] Fix link formatting issue in TextField/README.md

---
 src/components/TextField/README.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/TextField/README.md b/src/components/TextField/README.md
index 636983c82ef..97a4e065372 100644
--- a/src/components/TextField/README.md
+++ b/src/components/TextField/README.md
@@ -85,7 +85,7 @@ The autocomplete attribute in an `input` field controls two types of browser beh
 
 Even if you do not want the browser to autofill a user's information, it is recommended you still have an autocomplete attribute with the value off or nope.
 
-Unfortunately, [not all browsers support](https://caniuse.com/input-autocomplete-onoff) or respect autocomplete="off". This makes things challenging. Chrome, for example, [has a long outstanding bug]9https://bugs.chromium.org/p/chromium/issues/detail?id=468153) and won't add support for off for now.
+Unfortunately, [not all browsers support](https://caniuse.com/input-autocomplete-onoff) or respect autocomplete="off". This makes things challenging. Chrome, for example, [has a long outstanding bug](https://bugs.chromium.org/p/chromium/issues/detail?id=468153) and won't add support for off for now.
 
 | Browser | Support for `autocomplete="off"` | Details                                                                                                                                                             |
 | ------- | -------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------- |