diff --git a/changelog/27120.txt b/changelog/27120.txt new file mode 100644 index 000000000000..3a9630b986c5 --- /dev/null +++ b/changelog/27120.txt @@ -0,0 +1,3 @@ +```release-note:bug +ui: Fix KVv2 cursor jumping inside json editor after initial input. +``` \ No newline at end of file diff --git a/ui/lib/kv/addon/components/kv-data-fields.js b/ui/lib/kv/addon/components/kv-data-fields.js index 4ffd7ab574d4..e1902f82fbbb 100644 --- a/ui/lib/kv/addon/components/kv-data-fields.js +++ b/ui/lib/kv/addon/components/kv-data-fields.js @@ -29,8 +29,16 @@ import { stringify } from 'core/helpers/stringify'; export default class KvDataFields extends Component { @tracked lintingErrors; + get startingValue() { + // must pass the third param called "space" in JSON.stringify to structure object with whitespace + // otherwise the following codemirror modifier check will pass `this._editor.getValue() !== namedArgs.content` and _setValue will be called. + // the method _setValue moves the cursor to the beginning of the text field. + // the effect is that the cursor jumps after the first key input. + return JSON.stringify({ '': '' }, null, 2); + } + get stringifiedSecretData() { - return this.args.secret?.secretData ? stringify([this.args.secret.secretData], {}) : '{ "": "" }'; + return this.args.secret?.secretData ? stringify([this.args.secret.secretData], {}) : this.startingValue; } @action diff --git a/ui/tests/acceptance/secrets/backend/kv/kv-v2-workflow-edge-cases-test.js b/ui/tests/acceptance/secrets/backend/kv/kv-v2-workflow-edge-cases-test.js index bf94b8018838..86afc99b6c77 100644 --- a/ui/tests/acceptance/secrets/backend/kv/kv-v2-workflow-edge-cases-test.js +++ b/ui/tests/acceptance/secrets/backend/kv/kv-v2-workflow-edge-cases-test.js @@ -2,7 +2,7 @@ * Copyright (c) HashiCorp, Inc. * SPDX-License-Identifier: BUSL-1.1 */ - +/* eslint-disable no-useless-escape */ import { module, test } from 'qunit'; import { v4 as uuidv4 } from 'uuid'; import { click, currentURL, fillIn, findAll, setupOnerror, typeIn, visit } from '@ember/test-helpers'; @@ -281,7 +281,13 @@ module('Acceptance | kv-v2 workflow | edge cases', function (hooks) { await fillIn(FORM.inputByAttr('path'), 'complex'); await click(FORM.toggleJson); - assert.strictEqual(codemirror().getValue(), '{ "": "" }'); + + assert.strictEqual( + codemirror().getValue(), + `{ + \"\": \"\" +}` + ); codemirror().setValue('{ "foo3": { "name": "bar3" } }'); await click(FORM.saveBtn); diff --git a/ui/tests/integration/components/kv/kv-data-fields-test.js b/ui/tests/integration/components/kv/kv-data-fields-test.js index 0cd83dfb0c1b..16f8a3df2739 100644 --- a/ui/tests/integration/components/kv/kv-data-fields-test.js +++ b/ui/tests/integration/components/kv/kv-data-fields-test.js @@ -43,8 +43,8 @@ module('Integration | Component | kv-v2 | KvDataFields', function (hooks) { await render(hbs``, { owner: this.engine }); assert.strictEqual( codemirror().getValue(' '), - `{ \"\": \"\" }`, // eslint-disable-line no-useless-escape - 'json editor initializes with empty object' + `{ \"\": \"\" }`, // eslint-disable-line no-useless-escape + 'json editor initializes with empty object that includes whitespace' ); await fillIn(`${FORM.jsonEditor} textarea`, 'blah'); assert.strictEqual(codemirror().state.lint.marked.length, 1, 'codemirror lints input');