Skip to content

Commit

Permalink
feat: make the content editor focused when the reply form is opened (#…
Browse files Browse the repository at this point in the history
…104)

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

/kind feature

```release-note
支持打开评论回复时,自动聚焦输入框。
```
  • Loading branch information
ruibaby authored Mar 14, 2024
1 parent db8b800 commit d29197e
Show file tree
Hide file tree
Showing 2 changed files with 13 additions and 0 deletions.
4 changes: 4 additions & 0 deletions packages/comment-widget/src/base-form.ts
Original file line number Diff line number Diff line change
Expand Up @@ -223,6 +223,10 @@ export class BaseForm extends LitElement {
form?.reset();
}

setFocus() {
this.textareaRef.value?.focus();
}

static override styles = [
varStyles,
baseStyles,
Expand Down
9 changes: 9 additions & 0 deletions packages/comment-widget/src/reply-form.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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>`;
}
Expand Down

0 comments on commit d29197e

Please sign in to comment.