3.0 click behavior

CHANGELOG.md

@@ -100,3 +100,11 @@
     Issue: https://github.com/plotly/dash-table/issues/68
     Issue: https://github.com/plotly/dash-table/issues/73
     Issue: https://github.com/plotly/dash-table/issues/76
+
+## RC13 - Modify click & sequential click behavior
+
+    Incremental improvement for:
+    Issue: https://github.com/plotly/dash-table/issues/77
+
+    First click selects the cell's content and will cause user input to override the cell content.
+    Second click into the cell will remove the selection and position the cursor accordingly.

dash_table/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dash-table",
-  "version": "3.0.0rc12",
+  "version": "3.0.0rc13",
   "description": "Dash table",
   "main": "build/index.js",
   "scripts": {

package.json

@@ -1,6 +1,6 @@
 {
   "name": "dash-table",
-  "version": "3.0.0rc12",
+  "version": "3.0.0rc13",
   "description": "Dash table",
   "main": "build/index.js",
   "scripts": {

src/dash-table/components/Cell/index.tsx

@@ -293,9 +293,11 @@ export default class Cell extends Component<ICellProps, ICellState> {
 
     componentDidUpdate() {
         const { active } = this.propsWithDefaults;
+        const input = this.refs.textInput as HTMLInputElement;
 
-        if (active && this.refs.textInput) {
-            (this.refs.textInput as HTMLElement).focus();
+        if (active && input && document.activeElement !== input) {
+            input.focus();
+            input.setSelectionRange(0, input.value ? input.value.length : 0);
         }
 
         if (active && this.refs.dropdown) {

tests/e2e/cypress/integration/copy_paste_test.ts

@@ -9,7 +9,7 @@ describe('copy paste', () => {
 
     it('can do BE roundtrip on cell modification', () => {
         DashTable.getCell(0, 0).click();
-        DOM.focused.type(`1${Key.Enter}`);
+        DOM.focused.type(`10${Key.Enter}`);
 
         DashTable
             .getCell(0, 0)

tests/e2e/cypress/integration/dash_test.ts

@@ -15,6 +15,18 @@ describe('dash basic', () => {
         DashTable.getCell(0, 2).within(() => cy.get('input').should('have.value', '250'));
     });
 
+    it('cell click selects all text', () => {
+        DashTable.getCell(0, 3).click();
+        DashTable.getCell(0, 3).within(() =>
+            cy.get('input').then($inputs => {
+                const $input = $inputs[0];
+
+                expect($input.selectionStart).to.equal(0);
+                expect($input.selectionEnd).to.equal($input.value.length);
+            })
+        );
+    });
+
     // https://github.com/plotly/dash-table/issues/50
     it('can edit last and update dataframe on "enter"', () => {
         DashTable.getCell(249, 2).click();
@@ -24,7 +36,7 @@ describe('dash basic', () => {
             DOM.focused.type(`abc${Key.Enter}`);
 
             cy.get('#container').should($container => {
-                expect($container.first()[0].innerText).to.equal(`[249][0] = ${initialValue} -> abc${initialValue}`);
+                expect($container.first()[0].innerText).to.equal(`[249][0] = ${initialValue} -> abc`);
             });
         });
     });
@@ -38,7 +50,7 @@ describe('dash basic', () => {
             DashTable.getCell(248, 2).click();
 
             cy.get('#container').should($container => {
-                expect($container.first()[0].innerText).to.equal(`[249][0] = ${initialValue} -> abc${initialValue}`);
+                expect($container.first()[0].innerText).to.equal(`[249][0] = ${initialValue} -> abc`);
             });
         });
     });

tests/e2e/cypress/integration/edit_cell_test.ts

@@ -40,22 +40,14 @@ describe('edit cell', () => {
     // https://github.com/plotly/dash-table/issues/50
     it('can edit on "enter"', () => {
         DashTable.getCell(0, 3).click();
-        DOM.focused.then($input => {
-            const initialValue = $input.val();
-
-            DOM.focused.type(`abc${Key.Enter}`);
-            DashTable.getCell(0, 3).within(() => cy.get('.cell-value').should('have.html', `abc${initialValue}`));
-        });
+        DOM.focused.type(`abc${Key.Enter}`);
+        DashTable.getCell(0, 3).within(() => cy.get('.cell-value').should('have.html', `abc`));
     });
 
     it('can edit when clicking outside of cell', () => {
         DashTable.getCell(0, 3).click();
-        DOM.focused.then($input => {
-            const initialValue = $input.val();
-
-            DOM.focused.type(`abc`);
-            DashTable.getCell(0, 2).click();
-            DashTable.getCell(0, 3).within(() => cy.get('.cell-value').should('have.html', `abc${initialValue}`));
-        });
+        DOM.focused.type(`abc`);
+        DashTable.getCell(0, 2).click();
+        DashTable.getCell(0, 3).within(() => cy.get('.cell-value').should('have.html', `abc`));
     });
 });