Picklist Base modal works right

Author: ivansfdc

components/SLDSPicklistBase/index.jsx

@@ -165,7 +165,6 @@ module.exports = React.createClass( {
     return (
       !this.props.disabled && this.state.isOpen?
         <div 
-          ref="popover"
           className="slds-dropdown slds-dropdown--left slds-dropdown--small slds-dropdown--menu" 
           targetElement={this.refs.button} 
           style={{maxHeight:'20em'}}>
@@ -176,7 +175,11 @@ module.exports = React.createClass( {
 
   getModalPopover() {
     return (
-      !this.props.disabled && this.state.isOpen?<SLDSPopover className='slds-dropdown' targetElement={this.refs.date} onClose={this.handleClose}>
+      !this.props.disabled && this.state.isOpen?
+        <SLDSPopover 
+          className='slds-dropdown slds-dropdown--left slds-dropdown--small slds-dropdown--menu' 
+          targetElement={this.refs.date} 
+          onClose={this.handleCancel}>
           {this.getPopoverContent()}
         </SLDSPopover>:null
     );

components/SLDSPopover.js

@@ -9,17 +9,22 @@ THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND
 
 'use strict';
 
-import React from "react";
-import TetherDrop from "tether-drop";
+import React from 'react';
+import TetherDrop from 'tether-drop';
+import {EventUtil,KEYS} from './utils';
 //import { TransitionSpring, Spring } from 'react-motion';
 
 module.exports = React.createClass( {
 
   displayName: 'SLDSPopover',
 
-  mixins: [ require( "react-onclickoutside" ) ],
+  mixins: [ require( 'react-onclickoutside' ) ],
 
-  handleClickOutside (e) {
+  handleClickOutside () {
+    this.handleClose();
+  },
+
+  handleClose () {
     if(this.props.onClose){
       this.props.onClose();
     }
@@ -66,20 +71,29 @@ module.exports = React.createClass( {
     }
   },
 
+  handleKeyDown (event) {
+    if(event.keyCode === KEYS.TAB){
+      EventUtil.trap(event);
+      this.handleClose();
+    }
+  },
+
   popoverComp () {
     if(!this.state.isOpen){
       return <span></span>;
     }
     return (
       <div className={'SLDSPopover '+this.props.className}
-            style={{
-              transform:'none',
-              WebkitTransform:'none',
-              marginTop:'0.20rem',
-              marginBottom:'0.35rem',
-              float:'inherit',
-              position:'inherit',
-            }}>
+        style={{
+          transform:'none',
+          WebkitTransform:'none',
+          marginTop:'0.20rem',
+          marginBottom:'0.35rem',
+          float:'inherit',
+          position:'inherit',
+        }}
+        onKeyDown={this.handleKeyDown}
+      >
 {/*
         <Spring 
           defaultValue={{ val:0 }}

components/utils/EventUtil.js

@@ -11,7 +11,7 @@ THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND
 
 'use strict';
 
-module.exports = {
+const EventUtil = {
 
   trapEvent(event){
     event.preventDefault();
@@ -20,6 +20,12 @@ module.exports = {
       event.nativeEvent.preventDefault();
       event.nativeEvent.stopPropagation();
     }
+  },
+
+  trap(event){
+    return EventUtil.trapEvent( event );
   }
 
-};
+};
+
+module.exports = EventUtil;

demo/pages/HomePage.jsx

@@ -96,7 +96,7 @@ export default class HomePage extends Component {
                     ]} 
                     value='C0'
                     label="Contacts" 
-                    modal={false}
+                    modal={true}
                     placeholder = "Select a contact" />
               </div>
 

lib/SLDSPicklistBase/index.js

@@ -41,6 +41,7 @@ module.exports = _react2['default'].createClass({
       value: null,
       options: [],
       initialFocus: false,
+      modal: false,
       onClick: function onClick() {
         console.log('onClick should be defined');
       },
@@ -152,26 +153,40 @@ module.exports = _react2['default'].createClass({
     this.setFocus();
   },
 
-  getPopover: function getPopover() {
+  getPopoverContent: function getPopoverContent() {
+    return _react2['default'].createElement(_list2['default'], {
+      ref: 'list',
+      options: this.props.options,
+      label: this.props.label,
+      highlightedIndex: this.state.highlightedIndex,
+      selectedIndex: this.state.selectedIndex,
+      onSelect: this.handleSelect,
+      onUpdateHighlighted: this.handleUpdateHighlighted,
+      onListBlur: this.handleListBlur,
+      onListItemBlur: this.handleListItemBlur,
+      onCancel: this.handleCancel,
+      theme: this.props.theme });
+  },
+
+  getSimplePopover: function getSimplePopover() {
     return !this.props.disabled && this.state.isOpen ? _react2['default'].createElement(
       'div',
       {
-        ref: 'popover',
         className: 'slds-dropdown slds-dropdown--left slds-dropdown--small slds-dropdown--menu',
         targetElement: this.refs.button,
         style: { maxHeight: '20em' } },
-      _react2['default'].createElement(_list2['default'], {
-        ref: 'list',
-        options: this.props.options,
-        label: this.props.label,
-        highlightedIndex: this.state.highlightedIndex,
-        selectedIndex: this.state.selectedIndex,
-        onSelect: this.handleSelect,
-        onUpdateHighlighted: this.handleUpdateHighlighted,
-        onListBlur: this.handleListBlur,
-        onListItemBlur: this.handleListItemBlur,
-        onCancel: this.handleCancel,
-        theme: this.props.theme })
+      this.getPopoverContent()
+    ) : null;
+  },
+
+  getModalPopover: function getModalPopover() {
+    return !this.props.disabled && this.state.isOpen ? _react2['default'].createElement(
+      _SLDSPopover2['default'],
+      {
+        className: 'slds-dropdown slds-dropdown--left slds-dropdown--small slds-dropdown--menu',
+        targetElement: this.refs.date,
+        onClose: this.handleClose },
+      this.getPopoverContent()
     ) : null;
   },
 
@@ -217,7 +232,7 @@ module.exports = _react2['default'].createClass({
             ),
             _react2['default'].createElement(_SLDSIcons2.Icon, { name: 'down', category: 'utility' })
           ),
-          this.getPopover()
+          this.props.modal ? this.getModalPopover() : this.getSimplePopover()
         )
       )
     );