[Table] Move focus cell to (0,0) on FULL_TABLE selection (#1172)

* Move focus cell to (0,0) on FULL_TABLE selection * Add test
palantir · May 31, 2017 · 2fe81ad · 2fe81ad
1 parent afe2f62
commit 2fe81ad
Show file tree

Hide file tree

Showing 4 changed files with 29 additions and 19 deletions.
diff --git a/packages/table/src/interactions/selectable.tsx b/packages/table/src/interactions/selectable.tsx
@@ -84,23 +84,6 @@ export interface IDragSelectableProps extends ISelectableProps {
 
 @PureRender
 export class DragSelectable extends React.Component<IDragSelectableProps, {}> {
-    private static getFocusCellCoordinatesFromRegion(region: IRegion) {
-        const regionCardinality = Regions.getRegionCardinality(region);
-
-        switch (regionCardinality) {
-            case RegionCardinality.FULL_TABLE:
-                return { col: 0, row: 0 };
-            case RegionCardinality.FULL_COLUMNS:
-                return { col: region.cols[0], row: 0 };
-            case RegionCardinality.FULL_ROWS:
-                return { col: 0, row: region.rows[0] };
-            case RegionCardinality.CELLS:
-                return { col: region.cols[0], row: region.rows[0] };
-            default:
-                return null;
-        }
-    }
-
     private didExpandSelectionOnActivate = false;
 
     public render() {
@@ -138,7 +121,7 @@ export class DragSelectable extends React.Component<IDragSelectableProps, {}> {
             selectedRegionTransform,
         } = this.props;
 
-        const focusCellCoordinates = DragSelectable.getFocusCellCoordinatesFromRegion(region);
+        const focusCellCoordinates = Regions.getFocusCellCoordinatesFromRegion(region);
         this.props.onFocus(focusCellCoordinates);
 
         if (selectedRegionTransform != null) {

diff --git a/packages/table/src/regions.ts b/packages/table/src/regions.ts
@@ -152,6 +152,23 @@ export class Regions {
         }
     }
 
+    public static getFocusCellCoordinatesFromRegion(region: IRegion) {
+        const regionCardinality = Regions.getRegionCardinality(region);
+
+        switch (regionCardinality) {
+            case RegionCardinality.FULL_TABLE:
+                return { col: 0, row: 0 };
+            case RegionCardinality.FULL_COLUMNS:
+                return { col: region.cols[0], row: 0 };
+            case RegionCardinality.FULL_ROWS:
+                return { col: 0, row: region.rows[0] };
+            case RegionCardinality.CELLS:
+                return { col: region.cols[0], row: region.rows[0] };
+            default:
+                return null;
+        }
+    }
+
     /**
      * Returns a region containing one or more cells.
      */

diff --git a/packages/table/src/table.tsx b/packages/table/src/table.tsx
@@ -620,6 +620,10 @@ export class Table extends AbstractComponent<ITableProps, ITableState> {
         // clicking on upper left hand corner sets selection to "all"
         // regardless of current selection state (clicking twice does not deselect table)
         selectionHandler([Regions.table()]);
+
+        // move the focus cell to the top left
+        const newFocusedCellCoordinates = Regions.getFocusCellCoordinatesFromRegion(RegionCardinality.FULL_TABLE);
+        this.handleFocus(newFocusedCellCoordinates);
     }
 
     private handleSelectAllHotkey = (e: KeyboardEvent) => {

diff --git a/packages/table/test/tableTests.tsx b/packages/table/test/tableTests.tsx
@@ -143,11 +143,14 @@ describe("<Table>", () => {
         expect(table.state.rowHeights[0]).to.equal(MAX_HEIGHT);
     });
 
-    it("Selects all on click of upper-left corner", () => {
+    it("Selects all and moves focus cell to (0, 0) on click of upper-left corner", () => {
+        const onFocus = sinon.spy();
         const onSelection = sinon.spy();
 
         const table = harness.mount(
             <Table
+                enableFocus={true}
+                onFocus={onFocus}
                 onSelection={onSelection}
                 numRows={10}
             >
@@ -156,9 +159,12 @@ describe("<Table>", () => {
                 <Column renderCell={renderCell}/>
             </Table>,
         );
+
         const menu = table.find(`.${Classes.TABLE_MENU}`);
         menu.mouse("click");
+
         expect(onSelection.args[0][0]).to.deep.equal([Regions.table()]);
+        expect(onFocus.args[0][0]).to.deep.equal({ col: 0, row: 0 });
     });
 
     describe("Resizing", () => {