fix(#2476): Picker: HTML5 autoComplete prop does not get added to HiddenSelect within Picker (#2477)

Author: Michael Jordan

packages/@react-aria/select/src/HiddenSelect.tsx

@@ -16,6 +16,11 @@ import {useInteractionModality} from '@react-aria/interactions';
 import {useVisuallyHidden} from '@react-aria/visually-hidden';
 
 interface AriaHiddenSelectProps {
+  /**
+   * Describes the type of autocomplete functionality the input should provide if any. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#htmlattrdefautocomplete).
+   */
+   autoComplete?: string,
+
   /** The text label for the select. */
   label?: ReactNode,
 
@@ -40,7 +45,7 @@ interface HiddenSelectProps<T> extends AriaHiddenSelectProps {
  * navigation, and native HTML form submission.
  */
 export function useHiddenSelect<T>(props: AriaHiddenSelectProps, state: SelectState<T>, triggerRef: RefObject<HTMLElement>) {
-  let {name, isDisabled} = props;
+  let {autoComplete, name, isDisabled} = props;
   let modality = useInteractionModality();
   let {visuallyHiddenProps} = useVisuallyHidden();
 
@@ -76,6 +81,7 @@ export function useHiddenSelect<T>(props: AriaHiddenSelectProps, state: SelectSt
     },
     selectProps: {
       tabIndex: -1,
+      autoComplete,
       disabled: isDisabled,
       name,
       size: state.collection.size,
@@ -124,6 +130,7 @@ export function HiddenSelect<T>(props: HiddenSelectProps<T>) {
     return (
       <input
         type="hidden"
+        autoComplete={selectProps.autoComplete}
         name={name}
         disabled={isDisabled}
         value={state.selectedKey} />

packages/@react-spectrum/form/stories/Form.stories.tsx

@@ -29,6 +29,8 @@ import {StatusLight} from '@react-spectrum/statuslight';
 import {storiesOf} from '@storybook/react';
 import {Switch} from '@react-spectrum/switch';
 import {TextArea, TextField} from '@react-spectrum/textfield';
+import typographyStyles from '@adobe/spectrum-css-temp/components/typography/vars.css';
+import {Well} from '@react-spectrum/well';
 
 storiesOf('Form', module)
   .addParameters({providerSwitcher: {status: 'positive'}})
@@ -75,6 +77,74 @@ storiesOf('Form', module)
       </Form>
     )
   )
+  .add(
+    'fields with autoComplete property',
+    () => {
+      const [checked, setChecked] = useState(true);
+      return (
+        <Form>
+          <Well role="group" aria-labelledby="billing-legend">
+            <h2 id="billing-legend" className={typographyStyles['spectrum-Heading4']}>Billing address</h2>
+            <Flex>
+              <TextField autoComplete="billing given-name" name="firstName" isRequired label="First Name" placeholder="John" marginEnd="size-100" flex={1} />
+              <TextField autoComplete="billing family-name" name="lastName" isRequired label="Last Name" placeholder="Smith" flex={1} />
+            </Flex>
+            <Flex>
+              <TextArea autoComplete="billing street-address" name="streetAddress" isRequired label="Street Address" placeholder="123 Any Street" flex={1} />
+            </Flex>
+            <Flex>
+              <TextField autoComplete="billing address-level2" name="city" isRequired label="City" placeholder="San Francisco" marginEnd="size-100" flex={1} />
+              <Picker autoComplete="billing address-level1" name="state" isRequired label="State" placeholder="Select a state" items={states} marginEnd="size-100" flex={1}>
+                {item => <Item key={item.abbr}>{item.name}</Item>}
+              </Picker>
+              <TextField autoComplete="billing postal-code" name="zip" isRequired label="Zip code" placeholder="12345" flex={1} />
+            </Flex>
+            <Flex>
+              <Picker autoComplete="billing country" name="country" isRequired label="Country" placeholder="Select a country" items={countries} marginEnd="size-100" flex={1}>
+                {item => <Item key={item.code}>{item.name}</Item>}
+              </Picker>
+            </Flex>
+            <Flex>
+              <TextField autoComplete="billing tel" type="tel" name="phone" label="Phone number" placeholder="123-456-7890" marginEnd="size-100" flex={1} />
+              <TextField autoComplete="billing email" type="email" name="email" isRequired label="Email address" placeholder="[email protected]" marginEnd="size-100" flex={1} />
+            </Flex>
+          </Well>
+          <Well role="group" aria-labelledby="shipping-legend">
+            <h2 id="shipping-legend" className={typographyStyles['spectrum-Heading4']}>Shipping address</h2>
+            <Checkbox isSelected={checked} onChange={setChecked} >Same as billing address</Checkbox>
+            {
+              !checked &&
+              <>
+                <Flex>
+                  <TextField autoComplete="shipping given-name" name="shippingFirstName" isRequired label="First Name" placeholder="John" marginEnd="size-100" flex={1} />
+                  <TextField autoComplete="shipping family-name" name="shippingLastName" isRequired label="Last Name" placeholder="Smith" flex={1} />
+                </Flex>
+                <Flex>
+                  <TextArea autoComplete="shipping street-address" name="shippingStreetAddress" isRequired label="Street Address" placeholder="123 Any Street" flex={1} />
+                </Flex>
+                <Flex>
+                  <TextField autoComplete="shipping address-level2" name="shippingCity" isRequired label="City" placeholder="San Francisco" marginEnd="size-100" flex={1} />
+                  <Picker autoComplete="shipping address-level1" name="shippingState" isRequired label="State" placeholder="Select a state" items={states} marginEnd="size-100" flex={1}>
+                    {item => <Item key={item.abbr}>{item.name}</Item>}
+                  </Picker>
+                  <TextField autoComplete="shipping postal-code" name="shippingZip" isRequired label="Zip code" placeholder="12345" flex={1} />
+                </Flex>
+                <Flex>
+                  <Picker autoComplete="shipping country" name="shippingCountry" isRequired label="Country" placeholder="Select a country" items={countries} marginEnd="size-100" flex={1}>
+                    {item => <Item key={item.code}>{item.name}</Item>}
+                  </Picker>
+                </Flex>
+                <Flex>
+                  <TextField autoComplete="shipping tel" type="tel" name="shippingPhone" label="Phone number" placeholder="123-456-7890" marginEnd="size-100" flex={1} />
+                  <TextField autoComplete="shipping email" type="email" name="shippingEmail" isRequired label="Email address" placeholder="[email protected]" marginEnd="size-100" flex={1} />
+                </Flex>
+              </>
+            }
+          </Well>
+        </Form>
+      );
+    }
+  )
   .add(
     'isRequired: true',
     () => render({isRequired: true})

packages/@react-spectrum/form/stories/data.js

@@ -1,14 +1,18 @@
 export const states = [
   {name: 'Alabama', abbr: 'AL'},
   {name: 'Alaska', abbr: 'AK'},
+  {name: 'American Samoa', abbr: 'AS'},
   {name: 'Arizona', abbr: 'AZ'},
   {name: 'Arkansas', abbr: 'AR'},
   {name: 'California', abbr: 'CA'},
   {name: 'Colorado', abbr: 'CO'},
   {name: 'Connecticut', abbr: 'CT'},
   {name: 'Delaware', abbr: 'DE'},
+  {name: 'District Of Columbia', abbr: 'DC'},
+  {name: 'Federated States Of Micronesia', abbr: 'FM'},
   {name: 'Florida', abbr: 'FL'},
   {name: 'Georgia', abbr: 'GA'},
+  {name: 'Guam', abbr: 'GU'},
   {name: 'Hawaii', abbr: 'HI'},
   {name: 'Idaho', abbr: 'ID'},
   {name: 'Illinois', abbr: 'IL'},
@@ -17,34 +21,42 @@ export const states = [
   {name: 'Kansas', abbr: 'KS'},
   {name: 'Kentucky', abbr: 'KY'},
   {name: 'Louisiana', abbr: 'LA'},
+  {name: 'Maine', abbr: 'ME'},
+  {name: 'Marshall Islands', abbr: 'MH'},
   {name: 'Maryland', abbr: 'MD'},
   {name: 'Massachusetts', abbr: 'MA'},
-  {name: 'Maine', abbr: 'ME'},
   {name: 'Michigan', abbr: 'MI'},
   {name: 'Minnesota', abbr: 'MN'},
   {name: 'Mississippi', abbr: 'MS'},
   {name: 'Missouri', abbr: 'MO'},
-  {name: 'Montana', abbr: 'NT'},
+  {name: 'Montana', abbr: 'MT'},
+  {name: 'Nebraska', abbr: 'NE'},
   {name: 'Nevada', abbr: 'NV'},
+  {name: 'New Hampshire', abbr: 'NH'},
   {name: 'New Jersey', abbr: 'NJ'},
   {name: 'New Mexico', abbr: 'NM'},
   {name: 'New York', abbr: 'NY'},
   {name: 'North Carolina', abbr: 'NC'},
   {name: 'North Dakota', abbr: 'ND'},
+  {name: 'Northern Mariana Islands', abbr: 'MP'},
   {name: 'Ohio', abbr: 'OH'},
   {name: 'Oklahoma', abbr: 'OK'},
   {name: 'Oregon', abbr: 'OR'},
+  {name: 'Palau', abbr: 'PW'},
   {name: 'Pennsylvania', abbr: 'PA'},
+  {name: 'Puerto Rico', abbr: 'PR'},
   {name: 'Rhode Island', abbr: 'RI'},
   {name: 'South Carolina', abbr: 'SC'},
   {name: 'South Dakota', abbr: 'SD'},
   {name: 'Tennessee', abbr: 'TN'},
   {name: 'Texas', abbr: 'TX'},
   {name: 'Utah', abbr: 'UT'},
   {name: 'Vermont', abbr: 'VT'},
+  {name: 'Virgin Islands', abbr: 'VI'},
   {name: 'Virginia', abbr: 'VA'},
   {name: 'Washington', abbr: 'WA'},
   {name: 'West Virginia', abbr: 'WV'},
+  {name: 'Wisconsin', abbr: 'WI'},
   {name: 'Wyoming', abbr: 'WY'}
 ];
 

packages/@react-spectrum/picker/src/Picker.tsx

@@ -48,6 +48,7 @@ function Picker<T extends object>(props: SpectrumPickerProps<T>, ref: DOMRef<HTM
   props = useProviderProps(props);
   let formatMessage = useMessageFormatter(intlMessages);
   let {
+    autoComplete,
     isDisabled,
     direction = 'bottom',
     align = 'start',
@@ -199,6 +200,7 @@ function Picker<T extends object>(props: SpectrumPickerProps<T>, ref: DOMRef<HTM
         )
       }>
       <HiddenSelect
+        autoComplete={autoComplete}
         isDisabled={isDisabled}
         state={state}
         triggerRef={unwrappedTriggerRef}

packages/@react-spectrum/picker/test/Picker.test.js

@@ -20,6 +20,7 @@ import {Item, Picker, Section} from '../src';
 import Paste from '@spectrum-icons/workflow/Paste';
 import {Provider} from '@react-spectrum/provider';
 import React from 'react';
+import {states} from './data';
 import {Text} from '@react-spectrum/text';
 import {theme} from '@react-spectrum/theme-default';
 import {triggerPress} from '@react-spectrum/test-utils';
@@ -1740,10 +1741,8 @@ describe('Picker', function () {
     it('should have a hidden select element for form autocomplete', function () {
       let {getByText, getByRole} = render(
         <Provider theme={theme}>
-          <Picker label="Test" onSelectionChange={onSelectionChange}>
-            <Item key="one">One</Item>
-            <Item key="two">Two</Item>
-            <Item key="three">Three</Item>
+          <Picker label="Test" autoComplete="address-level1" items={states} onSelectionChange={onSelectionChange}>
+            {item => <Item key={item.abbr}>{item.name}</Item>}
           </Picker>
         </Provider>
       );
@@ -1766,18 +1765,16 @@ describe('Picker', function () {
       let hiddenSelect = getByRole('listbox', {hidden: true});
       expect(hiddenSelect.parentElement).toBe(hiddenLabel);
       expect(hiddenSelect).toHaveAttribute('tabIndex', '-1');
+      expect(hiddenSelect).toHaveAttribute('autoComplete', 'address-level1');
 
       let options = within(hiddenSelect).getAllByRole('option', {hidden: true});
-      expect(options.length).toBe(4);
-      expect(options[0]).toHaveTextContent('');
-      expect(options[1]).toHaveTextContent('One');
-      expect(options[2]).toHaveTextContent('Two');
-      expect(options[3]).toHaveTextContent('Three');
+      expect(options.length).toBe(60);
+      options.forEach((option, index) => index > 0 && expect(option).toHaveTextContent(states[index - 1].name));
 
-      fireEvent.change(hiddenSelect, {target: {value: 'two'}});
+      fireEvent.change(hiddenSelect, {target: {value: 'CA'}});
       expect(onSelectionChange).toHaveBeenCalledTimes(1);
-      expect(onSelectionChange).toHaveBeenLastCalledWith('two');
-      expect(picker).toHaveTextContent('Two');
+      expect(onSelectionChange).toHaveBeenLastCalledWith('CA');
+      expect(picker).toHaveTextContent('California');
     });
 
     it('should have a hidden input to marshall focus to the button', function () {