From 0005bb8514a84c348cf791c390509817498a9da2 Mon Sep 17 00:00:00 2001 From: Ian Silva Date: Mon, 26 Feb 2024 10:06:46 -0300 Subject: [PATCH] fix: call focus on comments textarea input when clicking on it --- .../comments/components/comment-input.test.ts | 9 +++++++++ .../comments/components/comment-input.ts | 13 +++++++++---- 2 files changed, 18 insertions(+), 4 deletions(-) diff --git a/src/web-components/comments/components/comment-input.test.ts b/src/web-components/comments/components/comment-input.test.ts index a956fac6..1ff66cee 100644 --- a/src/web-components/comments/components/comment-input.test.ts +++ b/src/web-components/comments/components/comment-input.test.ts @@ -378,4 +378,13 @@ describe('CommentsCommentInput', () => { expect(mockCancelComment).toHaveBeenCalled(); }); }); + + describe('focusInput', () => { + test('should focus keyboard cursor on input when clicking on it', () => { + element['getCommentInput']().focus = jest.fn(); + element['focusInput'](); + + expect(element['getCommentInput']().focus).toHaveBeenCalled(); + }); + }); }); diff --git a/src/web-components/comments/components/comment-input.ts b/src/web-components/comments/components/comment-input.ts index f5c51ac8..0fb7fb5b 100644 --- a/src/web-components/comments/components/comment-input.ts +++ b/src/web-components/comments/components/comment-input.ts @@ -99,10 +99,12 @@ export class CommentsCommentInput extends WebComponentsBaseElement { disconnectedCallback(): void { super.disconnectedCallback(); if (!['create-annotation', 'create-comment'].includes(this.eventType)) return; + const textarea = this.getCommentInput(); this.removeEventListener('keyup', this.sendEnter); - const textarea = this.getCommentInput(); textarea.removeEventListener('keydown', this.sendEnter); + textarea.removeEventListener('click', this.focusInput); + textarea.addEventListener('input', this.handleInput); } protected firstUpdated( @@ -115,9 +117,8 @@ export class CommentsCommentInput extends WebComponentsBaseElement { if (commentTextarea) { commentTextarea.addEventListener('input', this.handleInput); - - const textarea = this.getCommentInput(); - textarea.addEventListener('keydown', this.sendEnter); + commentTextarea.addEventListener('click', this.focusInput); + commentTextarea.addEventListener('keydown', this.sendEnter); } if (this.text.length > 0) { @@ -171,6 +172,10 @@ export class CommentsCommentInput extends WebComponentsBaseElement { return { searchText, position }; }; + private focusInput = () => { + this.getCommentInput().focus(); + }; + private handleInput = (e: InputEvent) => { if (this.commentInput?.value.length === 0) this.btnActive = false; else this.btnActive = true;