feat: make the content editor focused when the reply form is opened (#…

…104) 支持打开评论回复时，自动聚焦输入框。 /kind feature ```release-note 支持打开评论回复时，自动聚焦输入框。 ```
halo-dev · Mar 14, 2024 · d29197e · d29197e
1 parent db8b800
commit d29197e
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 0 deletions.
diff --git 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
@@ -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>`;
  }