provide autofocus property (#1330)

Co-authored-by: Daniel Lu <dlu@livefyre.com>

Author: tomsontom

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

@@ -55,7 +55,8 @@ function Picker<T extends object>(props: SpectrumPickerProps<T>, ref: DOMRef<HTM
     isRequired,
     necessityIndicator,
     menuWidth,
-    name
+    name,
+    autoFocus
   } = props;
 
   let {styleProps} = useStyleProps(props);
@@ -212,6 +213,7 @@ function Picker<T extends object>(props: SpectrumPickerProps<T>, ref: DOMRef<HTM
           isQuiet={isQuiet}
           isDisabled={isDisabled}
           validationState={validationState}
+          autoFocus={autoFocus}
           UNSAFE_className={classNames(styles, 'spectrum-Dropdown-trigger', {'is-hovered': isHovered})}>
           <SlotProvider
             slots={{

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

@@ -500,7 +500,14 @@ storiesOf('Picker', module)
       <AsyncLoadingExample />
     )
   )
-  .add('resize', () => <ResizePicker />);
+  .add('resize', () => <ResizePicker />)
+  .add('autofocus', () => (
+    <Picker label="Test" autoFocus>
+      <Item key="One">One</Item>
+      <Item key="Two">Two</Item>
+      <Item key="Three">Three</Item>
+    </Picker>
+  ));
 
 function AsyncLoadingExample() {
   interface Pokemon {

packages/@react-types/select/src/index.d.ts

@@ -59,5 +59,7 @@ export interface SpectrumPickerProps<T> extends AriaSelectProps<T>, SpectrumLabe
   /**
    * The name of the Picker input, used when submitting an HTML form.
    */
-  name?: string
+  name?: string,
+  /** Whether the element should receive focus on render. */
+  autoFocus?: boolean
 }