fix: composer no longer autofocusing (#4149)

flarum · Jan 3, 2025 · 3294941 · 3294941
1 parent 87fa4a3
commit 3294941
Show file tree

Hide file tree

Showing 4 changed files with 23 additions and 2 deletions.
diff --git a/framework/core/js/src/common/components/TextEditor.js b/framework/core/js/src/common/components/TextEditor.js
@@ -21,6 +21,7 @@ import LoadingIndicator from './LoadingIndicator';
  * - `placeholder`
  * - `disabled`
  * - `preview`
+ * - `onTextEditorBuilt`
  */
 export default class TextEditor extends Component {
   oninit(vnode) {
@@ -78,6 +79,7 @@ export default class TextEditor extends Component {
 
   onbuild() {
     this.attrs.composer.editor = this.buildEditor(this.$('.TextEditor-editorContainer')[0]);
+    this.attrs.onTextEditorBuilt?.();
   }
 
   onupdate(vnode) {

diff --git a/framework/core/js/src/forum/components/Composer.js b/framework/core/js/src/forum/components/Composer.js
@@ -31,6 +31,8 @@ export default class Composer extends Component {
 
     // Store the initial position so that we can trigger animations correctly.
     this.prevPosition = this.state.position;
+
+    this.textEditorBuilt = false;
   }
 
   view() {
@@ -53,7 +55,9 @@ export default class Composer extends Component {
         <div className="Composer-handle" oncreate={this.configHandle.bind(this)} />
         <ul className="Composer-controls">{listItems(this.controlItems().toArray())}</ul>
         <div className="Composer-content" onclick={showIfMinimized}>
-          {ComposerBody && <ComposerBody {...body.attrs} composer={this.state} disabled={classes.minimized} />}
+          {ComposerBody && (
+            <ComposerBody {...body.attrs} composer={this.state} disabled={classes.minimized} onTextEditorBuilt={this.onTextEditorBuilt.bind(this)} />
+          )}
         </div>
       </div>
     );
@@ -62,6 +66,17 @@ export default class Composer extends Component {
   onupdate(vnode) {
     super.onupdate(vnode);
 
+    if (this.textEditorBuilt) {
+      this.updateContainer();
+    }
+  }
+
+  onTextEditorBuilt() {
+    this.updateContainer();
+    this.textEditorBuilt = true;
+  }
+
+  updateContainer() {
     if (this.state.position === this.prevPosition) {
       // Set the height of the Composer element and its contents on each redraw,
       // so that they do not lose it if their DOM elements are recreated.

diff --git a/framework/core/js/src/forum/components/ComposerBody.tsx b/framework/core/js/src/forum/components/ComposerBody.tsx
@@ -17,6 +17,7 @@ export interface IComposerBodyAttrs extends ComponentAttrs {
   user: any;
   confirmExit: string;
   disabled: boolean;
+  onTextEditorBuilt?: Function | null;
 }
 
 /**
@@ -63,6 +64,7 @@ export default abstract class ComposerBody<CustomAttrs extends IComposerBodyAttr
                 onchange={this.composer.fields!.content}
                 onsubmit={this.onsubmit.bind(this)}
                 value={this.composer.fields!.content()}
+                onTextEditorBuilt={this.attrs.onTextEditorBuilt}
               />
             </div>
           </div>

diff --git a/framework/core/js/src/forum/components/DiscussionComposer.js b/framework/core/js/src/forum/components/DiscussionComposer.js
@@ -15,6 +15,8 @@ import Stream from '../../common/utils/Stream';
  * - `titlePlaceholder`
  */
 export default class DiscussionComposer extends ComposerBody {
+  static focusOnSelector = () => '.DiscussionComposer-title';
+
   static initAttrs(attrs) {
     super.initAttrs(attrs);
 
@@ -47,7 +49,7 @@ export default class DiscussionComposer extends ComposerBody {
       'discussionTitle',
       <h3>
         <input
-          className="FormControl"
+          className="FormControl DiscussionComposer-title"
           bidi={this.title}
           placeholder={this.attrs.titlePlaceholder}
           disabled={!!this.attrs.disabled}