diff --git a/.changeset/seven-fireants-cover.md b/.changeset/seven-fireants-cover.md new file mode 100644 index 00000000..1f851010 --- /dev/null +++ b/.changeset/seven-fireants-cover.md @@ -0,0 +1,5 @@ +--- +"@clack/core": patch +--- + +Fixes a rendering bug with cursor positions for `TextPrompt` diff --git a/packages/core/src/prompts/text.ts b/packages/core/src/prompts/text.ts index 54f20562..f2e1b76f 100644 --- a/packages/core/src/prompts/text.ts +++ b/packages/core/src/prompts/text.ts @@ -7,7 +7,17 @@ export interface TextOptions extends PromptOptions { } export default class TextPrompt extends Prompt { - valueWithCursor = ''; + get valueWithCursor() { + if (this.state === 'submit') { + return this.value; + } + if (this.cursor >= this.value.length) { + return `${this.value}${color.inverse(color.hidden('_'))}`; + } + const s1 = this.value.slice(0, this.cursor); + const [s2, ...s3] = this.value.slice(this.cursor); + return `${s1}${color.inverse(s2)}${s3.join('')}`; + } get cursor() { return this._cursor; } @@ -18,16 +28,6 @@ export default class TextPrompt extends Prompt { if (!this.value) { this.value = opts.defaultValue; } - this.valueWithCursor = this.value; - }); - this.on('value', () => { - if (this.cursor >= this.value.length) { - this.valueWithCursor = `${this.value}${color.inverse(color.hidden('_'))}`; - } else { - const s1 = this.value.slice(0, this.cursor); - const s2 = this.value.slice(this.cursor); - this.valueWithCursor = `${s1}${color.inverse(s2[0])}${s2.slice(1)}`; - } }); } }