[V4] Table.(SelectMenu/Editable)Cell bug fixes and improvements

src/table/src/EditableCell.js

@@ -100,7 +100,7 @@ class EditableCell extends React.PureComponent {
     }
   }
 
-  handleFieldBlur = value => {
+  handleFieldChangeComplete = value => {
     const { onChange, isSelectable } = this.props
     const currentValue = this.state.value
 
@@ -166,7 +166,7 @@ class EditableCell extends React.PureComponent {
                   getTargetRef={() => this.mainRef}
                   value={value}
                   onEscape={this.handleFieldEscape}
-                  onBlur={this.handleFieldBlur}
+                  onChangeComplete={this.handleFieldChangeComplete}
                   onCancel={this.handleFieldCancel}
                   size={size}
                 />

src/table/src/EditableCellField.js

@@ -35,7 +35,12 @@ export default class EditableCellField extends React.PureComponent {
     /**
      * Called when the textarea is blurred, pass the value back to the cell.
      */
-    onBlur: PropTypes.func.isRequired,
+    onChangeComplete: PropTypes.func.isRequired,
+
+    /**
+     * Called when Escape is hit or componentWillUnmount.
+     */
+    onCancel: PropTypes.func.isRequired,
 
     /**
      * Text size of the textarea.
@@ -65,6 +70,7 @@ export default class EditableCellField extends React.PureComponent {
 
   componentWillUnmount() {
     cancelAnimationFrame(this.latestAnimationFrame)
+    this.props.onCancel()
   }
 
   getTableBodyRef = targetRef => {
@@ -130,12 +136,14 @@ export default class EditableCellField extends React.PureComponent {
   }
 
   handleBlur = () => {
-    if (this.textareaRef) this.props.onBlur(this.textareaRef.value)
+    if (this.textareaRef) this.props.onChangeComplete(this.textareaRef.value)
   }
 
   handleKeyDown = e => {
     const { key } = e
-    if (key === 'Escape' || key === 'Enter') {
+    if (key === 'Escape') {
+      this.props.onCancel()
+    } else if (key === 'Enter') {
       this.textareaRef.blur()
       e.preventDefault()
     }

src/table/src/SelectMenuCell.js

@@ -46,7 +46,9 @@ class SelectMenuCell extends React.PureComponent {
   }
 
   state = {
-    targetWidth: MIN_SELECT_MENU_WIDTH
+    targetWidth: MIN_SELECT_MENU_WIDTH,
+    shouldClickToggle: false,
+    isFocused: false
   }
 
   constructor(props) {
@@ -102,8 +104,35 @@ class SelectMenuCell extends React.PureComponent {
     }
   }
 
-  handleClick = () => {
-    this.mainRef.focus()
+  handleClick = (toggle, isShown) => {
+    const { shouldClickToggle } = this.state
+
+    if (!shouldClickToggle && !isShown) {
+      this.setState({
+        shouldClickToggle: true
+      })
+      return
+    }
+
+    if (this.props.isSelectable && !this.props.disabled) {
+      toggle()
+      this.setState({
+        shouldClickToggle: true
+      })
+    }
+  }
+
+  handleFocus = () => {
+    this.setState({
+      isFocused: true
+    })
+  }
+
+  handleBlur = () => {
+    this.setState({
+      shouldClickToggle: false,
+      isFocused: false
+    })
   }
 
   render() {
@@ -118,27 +147,37 @@ class SelectMenuCell extends React.PureComponent {
       textProps = {},
       ...props
     } = this.props
-    const { targetWidth } = this.state
+    const { targetWidth, isFocused } = this.state
+
+    let cursor = 'default'
+    if (disabled) {
+      cursor = 'not-allowed'
+    } else if (isSelectable) {
+      if (isFocused) {
+        cursor = 'pointer'
+      } else {
+        cursor = 'default'
+      }
+    } else {
+      cursor = 'text'
+    }
 
     return (
-      <SelectMenu
-        onSelect={this.handleSelect}
-        width={targetWidth}
-        {...selectMenuProps}
-      >
+      <SelectMenu width={targetWidth} {...selectMenuProps}>
         {({ toggle, getRef, isShown }) => {
           return (
             <TextTableCell
               innerRef={this.onMainRef.bind(null, getRef)}
+              onClick={this.handleClick.bind(null, toggle, isShown)}
+              onFocus={this.handleFocus.bind(null, toggle, isShown)}
+              onBlur={this.handleBlur}
               isSelectable={isSelectable && !disabled}
               rightView={
                 isSelectable ? <Icon icon="caret-down" color="muted" /> : null
               }
               aria-haspopup
               aria-expanded={isShown}
-              cursor={
-                disabled ? 'not-allowed' : isSelectable ? 'default' : 'text'
-              }
+              cursor={isShown ? 'pointer' : cursor}
               textProps={{
                 size,
                 opacity: disabled || (!children && placeholder) ? 0.5 : 1,

src/table/src/TableCell.js

@@ -45,10 +45,8 @@ class TableCell extends PureComponent {
 
   static defaultProps = {
     appearance: 'default',
-    onClick: () => {},
     onSelect: () => {},
-    onDeselect: () => {},
-    onKeyPress: () => {}
+    onDeselect: () => {}
   }
 
   static styles = {
@@ -94,6 +92,12 @@ class TableCell extends PureComponent {
     }
   }
 
+  handleClick = e => {
+    if (typeof this.props.onClick === 'function') {
+      this.props.onClick(e)
+    }
+  }
+
   render() {
     const {
       innerRef,