From d29197eee2cbdc17c2326893fd9edd4b91523a05 Mon Sep 17 00:00:00 2001
From: Ryan Wang <i@ryanc.cc>
Date: Thu, 14 Mar 2024 11:06:06 +0800
Subject: [PATCH] feat: make the content editor focused when the reply form is
 opened (#104)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

支持打开评论回复时，自动聚焦输入框。

/kind feature

```release-note
支持打开评论回复时，自动聚焦输入框。
```
---
 packages/comment-widget/src/base-form.ts  | 4 ++++
 packages/comment-widget/src/reply-form.ts | 9 +++++++++
 2 files changed, 13 insertions(+)

diff --git a/packages/comment-widget/src/base-form.ts b/packages/comment-widget/src/base-form.ts
index 41ffbb2..9ae96dd 100644
--- a/packages/comment-widget/src/base-form.ts
+++ b/packages/comment-widget/src/base-form.ts
@@ -223,6 +223,10 @@ export class BaseForm extends LitElement {
     form?.reset();
   }
 
+  setFocus() {
+    this.textareaRef.value?.focus();
+  }
+
   static override styles = [
     varStyles,
     baseStyles,
diff --git a/packages/comment-widget/src/reply-form.ts b/packages/comment-widget/src/reply-form.ts
index 3c0ce18..be1e416 100644
--- a/packages/comment-widget/src/reply-form.ts
+++ b/packages/comment-widget/src/reply-form.ts
@@ -38,6 +38,15 @@ export class ReplyForm extends LitElement {
 
   baseFormRef: Ref<BaseForm> = createRef<BaseForm>();
 
+  override connectedCallback(): void {
+    super.connectedCallback();
+
+    setTimeout(() => {
+      this.scrollIntoView({ block: 'center', inline: 'start', behavior: 'smooth' });
+      this.baseFormRef.value?.setFocus();
+    }, 0);
+  }
+
   override render() {
     return html`<base-form ${ref(this.baseFormRef)} @submit="${this.onSubmit}"></base-form>`;
   }