Merge pull request #741 from NeurodataWithoutBorders/clear-selections-when-transitioning

Avoid needless selections and clear on transition

Author: CodyCBakerPhD

src/renderer/src/stories/Dashboard.js

@@ -202,6 +202,8 @@ export class Dashboard extends LitElement {
     }
 
     setMain(page) {
+        window.getSelection().empty(); // Remove user selection before transitioning
+
         // Update Previous Page
         const info = page.info;
         const previous = this.page;

src/renderer/src/stories/table/Cell.ts

@@ -219,7 +219,9 @@ export class TableCell extends LitElement {
         else if (this.schema.format === "date-time") {
             cls = DateTimeCell
             this.type = "date-time"
-        } else if (this.schema.type === "object") {
+        }
+
+        else if (this.schema.type === "object") {
             cls = NestedInputCell
             this.type = "table"
         }

src/renderer/src/stories/table/cells/base.ts

@@ -201,17 +201,33 @@ export class TableCellBase extends LitElement {
 
     set(value: any, runOnChange = true) {
 
-        if (document.execCommand) {
+        // Ensure all operations are undoable
+        if (typeof InputEvent === 'function') {
             this.#editable.setAttribute('contenteditable', '')
             this.#editable.focus();
-            document.execCommand('selectAll');
-            document.execCommand('insertText', false, value);
+
+            const range = document.createRange();
+            range.selectNodeContents(this.#editable);
+            const sel = window.getSelection()!;
+            sel.removeAllRanges();
+            sel.addRange(range);
+
+            const inputEvent = new InputEvent('input', {
+                bubbles: true,
+                cancelable: false,
+                data: value,
+                inputType: 'insertText',
+            });
+
+            this.#editable.dispatchEvent(inputEvent);
+
             this.setText(value, undefined, runOnChange)
             this.#editable.blur();
             this.#editable.removeAttribute('contenteditable')
         }
 
-        else this.setText(value, undefined, runOnChange) // Ensure value is still set
+
+        else this.setText(value, undefined, runOnChange) // Just set value
     }
 
     #render(property: 'renderer' | 'editor') {

tests/e2e/workflow.ts

@@ -379,7 +379,6 @@ export default async function runWorkflow(name, workflow, identifier) {
       const page = dashboard.page
       const firstSessionForm = page.forms[0].form
       firstSessionForm.accordions["NWBFile"].toggle(true)
-      window.getSelection().empty() // Remove annoying user-select highlight
     })
 
     await takeScreenshot(join(identifier, 'metadata-nwbfile'), 100)