fix menu blur when clicked disabled menu or scroll bar

Author: stomita

src/scripts/DropdownMenu.js

@@ -162,6 +162,7 @@ export default class DropdownMenu extends Component {
   render() {
     const {
       className, align = 'left', size, header, nubbinTop, hoverPopup, children, style,
+      onFocus, onBlur,
     } = this.props;
     const dropdownMenuClassNames = classnames(
       className,
@@ -177,9 +178,12 @@ export default class DropdownMenu extends Component {
     return (
       <div
         ref={this.props.dropdownMenuRef}
-        style={style}
+        style={ { outline: 'none', ...style } }
         className={ dropdownMenuClassNames }
         onKeyDown={ this.onKeyDown.bind(this) }
+        tabIndex='-1'
+        onFocus={ onFocus }
+        onBlur={ onBlur }
       >
         { header ? <MenuHeader>{ header }</MenuHeader> : null }
         <ul className='slds-dropdown__list' role='menu'>

src/scripts/Picklist.js

@@ -212,7 +212,7 @@ export default class Picklist extends Component {
     );
   }
 
-  renderDropdown(menuSize) {
+  renderDropdown(menuSize, menuStyle) {
     const { children } = this.props;
     return (
       this.state.opened ?
@@ -221,6 +221,8 @@ export default class Picklist extends Component {
           size={ menuSize }
           onMenuItemClick={ this.onPicklistItemClick }
           onMenuClose={ this.onPicklistClose }
+          style={ menuStyle }
+          onBlur={ this.onBlur }
         >
           { React.Children.map(children, this.renderPicklistItem) }
         </DropdownMenu> :
@@ -236,8 +238,8 @@ export default class Picklist extends Component {
 
   render() {
     const id = this.props.id || this.state.id;
-    const { label, required, error, totalCols, cols, menuSize, ...props } = this.props;
-    const dropdown = this.renderDropdown(menuSize);
+    const { label, required, error, totalCols, cols, menuSize, menuStyle, ...props } = this.props;
+    const dropdown = this.renderDropdown(menuSize, menuStyle);
     const formElemProps = { id, label, required, error, totalCols, cols, dropdown };
     return (
       <FormElement formElementRef={ node => (this.node = node) } { ...formElemProps }>
@@ -282,6 +284,7 @@ Picklist.propTypes = {
   onKeyDown: PropTypes.func,
   onBlur: PropTypes.func,
   menuSize: PropTypes.string,
+  menuStyle: PropTypes.object, // eslint-disable-line react/forbid-prop-types
   children: PropTypes.node,
   optionsSelectedText: PropTypes.string,
 };

stories/PicklistStories.js

@@ -104,4 +104,25 @@ storiesOf('Picklist', module)
       <PicklistItem label='Picklist Item Three' value='3' />
     </Picklist>
   ))
+  .addWithInfo('Dropdown Scroll', 'Picklist control with many items', () => (
+    <div tabIndex='-1'>
+      <Picklist
+        label='Picklist Label'
+        selectedText='Select item from here'
+        onChange={ action('change') }
+        onValueChange={ action('valueChange') }
+        onSelect={ action('select') }
+        onBlur={ action('blur') }
+        onComplete={ action('complete') }
+        menuSize='small'
+        menuStyle={ { maxHeight: '20rem', overflowY: 'auto' } }
+      >
+        {
+          Array.from(Array(20)).map((_, i) => (
+            <PicklistItem label={ `Picklsit Item #${i + 1}` } value={ String(i + 1) } />
+          ))
+        }
+      </Picklist>
+    </div>
+  ))
 ;