feat(Select): select the editable cell value on focus (#35)

* feat(Select): select the editable cell value on focus * chore(versions): upgrade version
Decathlon · Nov 3, 2020 · b880812 · b880812
1 parent 0cf6a54
commit b880812
Show file tree

Hide file tree

Showing 4 changed files with 9 additions and 9 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@decathlon/react-table",
-  "version": "1.14.2",
+  "version": "1.15.0",
   "description": "React components for efficiently rendering large tabular data",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",

diff --git a/src/components/styled-table/editable-cell.tsx b/src/components/styled-table/editable-cell.tsx
@@ -93,6 +93,10 @@ export default class EdiTableCell extends React.PureComponent<IEdiTableCellProps
     return [false, newValue];
   };
 
+  private selectValue = (event: React.MouseEvent<HTMLInputElement, MouseEvent>) => {
+    event.currentTarget.select();
+  };
+
   private focus = () => {
     const { value } = this.props;
     const newInputValue = this.getInputValue();
@@ -190,7 +194,7 @@ export default class EdiTableCell extends React.PureComponent<IEdiTableCellProps
             thousandSeparator=" "
             decimalSeparator=","
             style={{ width: inputValueWidth }}
-            InputProps={{ classes: { underline: "editable-cell__underline" } }}
+            InputProps={{ classes: { underline: "editable-cell__underline" }, onFocus: this.selectValue }}
             isNumericString
             decimalScale={mask.decimals}
             allowNegative={mask.is_negative}

diff --git a/stories/components/styled-table/editable-cell.stories.tsx b/stories/components/styled-table/editable-cell.stories.tsx
@@ -10,7 +10,6 @@ import Table from "../../../src/components/table/table";
 import { IContentCellProps } from "../../../src/components/table/cell";
 import { getTable } from "./tables";
 import { Nullable } from "../../../src/components/typing";
-import { SelectionMenu } from "../../stories-components/selection-menu";
 
 interface IProps extends IContentCellProps {
   defaultValue: number;
@@ -21,7 +20,7 @@ interface IProps extends IContentCellProps {
 
 const mask: IMask = {
   is_percentage: false,
-  is_negative: false,
+  is_negative: true,
   decimals: 2
 };
 
@@ -128,10 +127,7 @@ storiesOf("Styled Table/editable cell", module)
         {...defaultProps}
         columns={{ 0: { style: { justifyContent: "left" } } }}
         isVirtualized
-        isSelectable
-        selectionProps={{
-          menuComponent: SelectionMenu
-        }}
+        isSelectable={false}
         virtualizerProps={{
           fixedRows: object("fixedRows", [0]),
           fixedColumns: object("fixedColumns", [0]),