Dropdown: add focusOnMount prop to pass onto Popover component (#12855)

packages/components/CHANGELOG.md

@@ -9,6 +9,10 @@
 
 - Resolves a conflict where two instance of Slot would produce an inconsistent or duplicated rendering output.
 
+### New Feature
+
+- `Dropdown` now has a `focusOnMount` prop which is passed directly to the contained `Popover`.
+
 ## 7.0.5 (2019-01-03)
 
 ## 7.0.4 (2018-12-12)

packages/components/src/dropdown/README.md

@@ -90,3 +90,13 @@ Opt-in prop to show popovers fullscreen on mobile, pass `false` in this prop to
 
  - Type: `String`
  - Required: No
+
+ ### focusOnMount
+
+ By default, the *first tabblable element* in the popover will receive focus when it mounts. This is the same as setting `focusOnMount` to `"firstElement"`. If you want to focus the container instead, you can set `focusOnMount` to `"container"`.
+
+ Set this prop to `false` to disable focus changing entirely. This should only be set when an appropriately accessible substitute behavior exists.
+
+ - Type: `String` or `Boolean`
+ - Required: No
+ - Default: `"firstElement"`

packages/components/src/dropdown/index.js

@@ -73,6 +73,7 @@ class Dropdown extends Component {
 			contentClassName,
 			expandOnMobile,
 			headerTitle,
+			focusOnMount,
 		} = this.props;
 
 		const args = { isOpen, onToggle: this.toggle, onClose: this.close };
@@ -88,6 +89,7 @@ class Dropdown extends Component {
 						onClickOutside={ this.closeIfClickOutside }
 						expandOnMobile={ expandOnMobile }
 						headerTitle={ headerTitle }
+						focusOnMount={ focusOnMount }
 					>
 						{ renderContent( args ) }
 					</Popover>