[TextField] Make autoComplete prop a required string

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 recommend setting `autoComplete` to `"off"`.
 
 ### Enhancements
 

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

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

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

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

playground/DetailsPage.tsx

@@ -577,11 +577,13 @@ export function DetailsPage() {
                 label="Title"
                 value="M60-A"
                 onChange={() => setIsDirty(true)}
+                autoComplete="off"
               />
               <TextField
                 label="Description"
                 value={descriptionValue}
                 onChange={handleChange}
+                autoComplete="off"
                 multiline
               />
             </FormLayout>
@@ -653,11 +655,13 @@ export function DetailsPage() {
             label="Subject"
             value={supportSubject}
             onChange={handleSubjectChange}
+            autoComplete="off"
           />
           <TextField
             label="Message"
             value={supportMessage}
             onChange={handleMessageChange}
+            autoComplete="off"
             multiline
           />
         </FormLayout>

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="off" />;
 }
 
 function renderNodeWithId() {

src/components/Autocomplete/components/TextField/TextField.tsx

@@ -11,7 +11,7 @@ export function TextField(props: TextFieldProps) {
         <BaseTextField
           {...props}
           role="combobox"
-          autoComplete={false}
+          autoComplete="off"
           ariaAutocomplete="list"
           ariaActiveDescendant={selectedOptionId}
           ariaControls={comboBoxId}

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="off" />
+    );
   }
 
   function handleOnSelect(this: any, updatedSelection: string[]) {

src/components/ChoiceList/README.md

@@ -322,6 +322,7 @@ function SingleOrMultiChoiceListWithChildrenContextExample() {
         labelHidden
         onChange={handleTextFieldChange}
         value={textFieldValue}
+        autoComplete="off"
       />
     ),
     [handleTextFieldChange, textFieldValue],
@@ -372,6 +373,7 @@ function SingleOrMultuChoiceListWithChildrenContextWhenSelectedExample() {
           labelHidden
           onChange={handleTextFieldChange}
           value={textFieldValue}
+          autoComplete="off"
         />
       ),
     [handleTextFieldChange, textFieldValue],

src/components/Filters/Filters.tsx

@@ -287,6 +287,7 @@ class FiltersInner extends Component<CombinedProps, State> {
             clearButton
             onClearButtonClick={onQueryClear}
             disabled={disabled}
+            autoComplete="off"
           />
         )}
       </ConnectedFilterControl>

src/components/Filters/README.md

@@ -211,6 +211,7 @@ function ResourceListFiltersExample() {
           label="Tagged with"
           value={taggedWith}
           onChange={handleTaggedWithChange}
+          autoComplete="off"
           labelHidden
         />
       ),
@@ -423,6 +424,7 @@ function DataTableFiltersExample() {
           label="Tagged with"
           value={taggedWith}
           onChange={handleTaggedWithChange}
+          autoComplete="off"
           labelHidden
         />
       ),
@@ -555,6 +557,7 @@ function FiltersExample() {
           label="Tagged with"
           value={taggedWith}
           onChange={handleTaggedWithChange}
+          autoComplete="off"
           labelHidden
         />
       ),
@@ -681,6 +684,7 @@ function DisableAllFiltersExample() {
           label="Tagged with"
           value={taggedWith}
           onChange={handleTaggedWithChange}
+          autoComplete="off"
           labelHidden
         />
       ),
@@ -816,6 +820,7 @@ function DisableSomeFiltersExample() {
           label="Tagged with"
           value={taggedWith}
           onChange={handleTaggedWithChange}
+          autoComplete="off"
           labelHidden
         />
       ),
@@ -829,6 +834,7 @@ function DisableSomeFiltersExample() {
           label="Vendor"
           value={vendor}
           onChange={handleVendorChange}
+          autoComplete="off"
           labelHidden
         />
       ),
@@ -960,6 +966,7 @@ function Playground() {
           label="Tagged with"
           value={taggedWith}
           onChange={handleTaggedWithChange}
+          autoComplete="off"
           labelHidden
         />
       ),
@@ -1131,6 +1138,7 @@ function ResourceListFiltersExample() {
           label="Tagged with"
           value={taggedWith}
           onChange={handleTaggedWithChange}
+          autoComplete="off"
           labelHidden
         />
       ),
@@ -1331,6 +1339,7 @@ function ResourceListFiltersExample() {
           label="Tagged with"
           value={taggedWith}
           onChange={handleTaggedWithChange}
+          autoComplete="off"
           labelHidden
         />
       ),

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="off"
         />
 
         <Button submit>Submit</Button>

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="off" />
+  <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="off"
+    />
+    <TextField
+      type="number"
+      label="Maximum order"
+      onChange={() => {}}
+      autoComplete="off"
+    />
   </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="off" />
+    <TextField label="Width" onChange={() => {}} autoComplete="off" />
+    <TextField label="Height" onChange={() => {}} autoComplete="off" />
+    <TextField label="Unit" onChange={() => {}} autoComplete="off" />
   </FormLayout.Group>
 </FormLayout>
 ```

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="off" />;
     title = 'Title';
     helpText = 'Help text';
     item = mountWithAppProvider(

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="off" />
+    );
     const item = mountWithAppProvider(<Item>{children}</Item>);
     expect(item.contains(children)).toBe(true);
   });

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="off" />
+    );
     const formLayout = mountWithAppProvider(
       <FormLayout>{children}</FormLayout>,
     );