Merge pull request #709 from Security-Onion-Solutions/cogburn/setting…

…s-click-fix Update Selection
Security-Onion-Solutions · Jan 9, 2025 · cbe92cb · cbe92cb
2 parents be54c5f + 6d125d9
commit cbe92cb
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 1 deletion.
diff --git a/html/js/routes/config.js b/html/js/routes/config.js
@@ -512,6 +512,7 @@ routes.push({
       this.$root.stopLoading();
     },
     edit(setting, nodeId) {
+      setTimeout(() => {
       if (nodeId) {
         if ((this.form.key == nodeId) || !this.cancel()) return;
         this.form.key = nodeId;
@@ -523,6 +524,24 @@ routes.push({
         this.form.value = setting.value;
         this.$root.drawAttention('#setting-global-save');
       }
+
+        // transfer caret position from non-edit element to edit element
+        let selector = nodeId ? 'node-value-output-' + nodeId : 'value-output';
+        const before = document.getElementById(selector);
+        const scrollTop = before?.scrollTop || 0;
+        const selStart = before?.selectionStart || 0;
+        const selEnd = before?.selectionEnd || 0;
+        this.$nextTick(() => {
+          selector = nodeId ? 'node-value-input-' + nodeId : 'value-input';
+          const after = document.getElementById(selector);
+          if (after && typeof scrollTop !== 'undefined' &&
+            typeof selStart !== 'undefined' && typeof selEnd !== 'undefined') {
+            after.focus();
+            after.scrollTop = scrollTop;
+            after.setSelectionRange(selStart, selEnd);
+          }
+        });
+      }, 1);
     },
     addNode(setting, nodeId) {
       if (this.cancel() && setting && nodeId) {

diff --git a/html/js/routes/config.test.js b/html/js/routes/config.test.js
@@ -508,13 +508,14 @@ test('saveRegexValidMultiline', async () => {
   expect(mock).toHaveBeenCalledWith('config/', {"id": "test.id", "nodeId": null, "value": "123\n456"});
 });
 
-test('edit', () => {
+test('edit', async () => {
   // Global edit, nothing pending
   setupSettings();
   comp.cancelDialog = false;
   comp.form.value = null;
   comp.form.key = null;
   comp.edit(comp.settings[0], null);
+  await new Promise(resolve => setTimeout(resolve, 2));
   expect(comp.form.key).toBe("s-id");
   expect(comp.form.value).toBe("orig-value");
   expect(comp.cancelDialog).toBe(false);
@@ -526,6 +527,7 @@ test('edit', () => {
   comp.form.key = "s-id2";
   comp.activeBackup = ["s-id2"];
   comp.edit(comp.settings[0], null);
+  await new Promise(resolve => setTimeout(resolve, 2));
   expect(comp.form.key).toBe("s-id2");
   expect(comp.form.value).toBe("touched-value");
   expect(comp.cancelDialog).toBe(true);
@@ -535,6 +537,7 @@ test('edit', () => {
   comp.form.value = null;
   comp.form.key = null;
   comp.edit(comp.settings[0], "n1");
+  await new Promise(resolve => setTimeout(resolve, 2));
   expect(comp.form.key).toBe("n1");
   expect(comp.form.value).toBe("123");
   expect(comp.cancelDialog).toBe(false);
@@ -544,6 +547,7 @@ test('edit', () => {
   comp.form.value = "touched-value";
   comp.form.key = "n2";
   comp.edit(comp.settings[0], "n1");
+  await new Promise(resolve => setTimeout(resolve, 2));
   expect(comp.form.key).toBe("n2");
   expect(comp.form.value).toBe("touched-value");
   expect(comp.cancelDialog).toBe(true);