fix(blocks): focus ai input after position updated (#8981)

Fix issue [BS-2105](https://linear.app/affine-design/issue/BS-2105).
toeverything · Dec 16, 2024 · 68fd625 · 68fd625
1 parent 8540737
commit 68fd625
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 15 deletions.
diff --git a/packages/blocks/src/root-block/widgets/ai-panel/ai-panel.ts b/packages/blocks/src/root-block/widgets/ai-panel/ai-panel.ts
@@ -350,6 +350,10 @@ export class AffineAIPanelWidget extends WidgetComponent {
         .then(({ x, y }) => {
           this.style.left = `${x}px`;
           this.style.top = `${y}px`;
+          setTimeout(() => {
+            const input = this.shadowRoot?.querySelector('ai-panel-input');
+            input?.textarea?.focus();
+          }, 0);
         })
         .catch(console.error);
     });

diff --git a/packages/blocks/src/root-block/widgets/ai-panel/components/state/input.ts b/packages/blocks/src/root-block/widgets/ai-panel/components/state/input.ts
@@ -85,11 +85,11 @@ export class AIPanelInput extends WithDisposable(LitElement) {
   `;
 
   private _onInput = () => {
-    this._textarea.style.height = 'auto';
-    this._textarea.style.height = this._textarea.scrollHeight + 'px';
+    this.textarea.style.height = 'auto';
+    this.textarea.style.height = this.textarea.scrollHeight + 'px';
 
-    this.onInput?.(this._textarea.value);
-    const value = this._textarea.value.trim();
+    this.onInput?.(this.textarea.value);
+    const value = this.textarea.value.trim();
     if (value.length > 0) {
       this._arrow.dataset.active = '';
       this._hasContent = true;
@@ -107,20 +107,14 @@ export class AIPanelInput extends WithDisposable(LitElement) {
   };
 
   private _sendToAI = () => {
-    const value = this._textarea.value.trim();
+    const value = this.textarea.value.trim();
     if (value.length === 0) return;
 
     this.onFinish?.(value);
     this.remove();
   };
 
   override render() {
-    this.updateComplete
-      .then(() => {
-        this._textarea.focus();
-      })
-      .catch(console.error);
-
     return html`<div class="root">
       <div class="icon">${AIStarIcon}</div>
       <div class="textarea-container">
@@ -153,7 +147,7 @@ export class AIPanelInput extends WithDisposable(LitElement) {
 
   override updated(_changedProperties: Map<PropertyKey, unknown>): void {
     const result = super.updated(_changedProperties);
-    this._textarea.style.height = this._textarea.scrollHeight + 'px';
+    this.textarea.style.height = this.textarea.scrollHeight + 'px';
     return result;
   }
 
@@ -163,14 +157,14 @@ export class AIPanelInput extends WithDisposable(LitElement) {
   @state()
   private accessor _hasContent = false;
 
-  @query('textarea')
-  private accessor _textarea!: HTMLTextAreaElement;
-
   @property({ attribute: false })
   accessor onFinish: ((input: string) => void) | undefined = undefined;
 
   @property({ attribute: false })
   accessor onInput: ((input: string) => void) | undefined = undefined;
+
+  @query('textarea')
+  accessor textarea!: HTMLTextAreaElement;
 }
 
 declare global {