[Table/EditableCell] Type in a cell to edit it now (#1760)

* Type in a cell to edit it now * Disable type-to-edit without focus cell * add period
palantir · Nov 7, 2017 · 9437291 · 9437291 · blueprint-bot · Nov 7, 2017
1 parent 328cff2
commit 9437291
Show file tree

Hide file tree

Showing 2 changed files with 28 additions and 3 deletions.
diff --git a/packages/table/src/cell/cell.tsx b/packages/table/src/cell/cell.tsx
@@ -78,6 +78,11 @@ export interface ICellProps extends IIntentProps, IProps {
      */
     onKeyUp?: React.KeyboardEventHandler<HTMLElement>;
 
+    /**
+     * Callback invoked when a character-key is pressed.
+     */
+    onKeyPress?: React.KeyboardEventHandler<HTMLElement>;
+
     /**
      * A ref handle to capture the outer div of this cell. Used internally.
      */
@@ -108,6 +113,7 @@ export class Cell extends React.Component<ICellProps, {}> {
             tabIndex,
             onKeyDown,
             onKeyUp,
+            onKeyPress,
             style,
             intent,
             interactive,
@@ -163,7 +169,12 @@ export class Cell extends React.Component<ICellProps, {}> {
         const content = <div className={textClasses}>{modifiedChildren}</div>;
 
         return (
-            <div className={classes} title={tooltip} ref={cellRef} {...{ style, tabIndex, onKeyDown, onKeyUp }}>
+            <div
+                className={classes}
+                title={tooltip}
+                ref={cellRef}
+                {...{ style, tabIndex, onKeyDown, onKeyUp, onKeyPress }}
+            >
                 <LoadableContent loading={loading} variableLength={true}>
                     {content}
                 </LoadableContent>

diff --git a/packages/table/src/cell/editableCell.tsx b/packages/table/src/cell/editableCell.tsx
@@ -120,7 +120,7 @@ export class EditableCell extends React.Component<IEditableCellProps, IEditableC
                     onConfirm={this.handleConfirm}
                     onEdit={this.handleEdit}
                     placeholder=""
-                    selectAllOnFocus={true}
+                    selectAllOnFocus={false}
                     value={dirtyValue}
                 />
             );
@@ -134,7 +134,13 @@ export class EditableCell extends React.Component<IEditableCellProps, IEditableC
         }
 
         return (
-            <Cell {...spreadableProps} truncated={false} interactive={interactive} cellRef={this.refHandlers.cell}>
+            <Cell
+                {...spreadableProps}
+                truncated={false}
+                interactive={interactive}
+                cellRef={this.refHandlers.cell}
+                onKeyPress={this.handleKeyPress}
+            >
                 <Draggable
                     onActivate={this.handleCellActivate}
                     onDoubleClick={this.handleCellDoubleClick}
@@ -168,6 +174,14 @@ export class EditableCell extends React.Component<IEditableCellProps, IEditableC
         }
     }
 
+    private handleKeyPress = () => {
+        if (this.state.isEditing || !this.props.isFocused) {
+            return;
+        }
+        // setting dirty value to empty string because apparently the text field will pick up the key and write it in there
+        this.setState({ isEditing: true, dirtyValue: "", savedValue: this.state.savedValue });
+    };
+
     private handleEdit = () => {
         this.setState({ isEditing: true, dirtyValue: this.state.savedValue });
     };