feat: allow to disable auto focus on message input

projects/stream-chat-angular/src/lib/message-input/autocomplete-textarea/autocomplete-textarea.component.html

@@ -1,6 +1,6 @@
 <textarea
   [value]="value || ''"
-  autofocus
+  [autofocus]="autoFocus"
   data-testid="textarea"
   #input
   placeholder="{{ placeholder | translate }}"

projects/stream-chat-angular/src/lib/message-input/autocomplete-textarea/autocomplete-textarea.component.ts

@@ -62,6 +62,10 @@ export class AutocompleteTextareaComponent
    * The scope for user mentions, either members of the current channel of members of the application. You can also set this input on the [`MessageInput`](./MessageInputComponent.mdx/#inputs-and-outputs) component.
    */
   @Input() mentionScope: 'channel' | 'application' = 'channel';
+  /**
+   * Enables or disables auto focus on the textarea element
+   */
+  @Input() autoFocus = true;
   /**
    * Emits the current value of the input element when a user types.
    */

projects/stream-chat-angular/src/lib/message-input/message-input.component.html

@@ -108,6 +108,7 @@
             [mentionScope]="mentionScope"
             [placeholder]="textareaPlaceholder"
             [inputMode]="inputMode"
+            [autoFocus]="autoFocus"
           ></ng-container>
         </ng-container>
         <ng-template #disabledTextarea>
@@ -310,6 +311,7 @@
             [areMentionsEnabled]="areMentionsEnabled"
             [mentionScope]="mentionScope"
             [inputMode]="inputMode"
+            [autoFocus]="autoFocus"
             [placeholder]="textareaPlaceholder"
           ></ng-container>
           <div class="str-chat__message-textarea-emoji-picker">

projects/stream-chat-angular/src/lib/message-input/message-input.component.spec.ts

@@ -177,6 +177,7 @@ describe('MessageInputComponent', () => {
     expect(textarea?.value).toEqual('Hi');
     expect(textarea?.areMentionsEnabled).toBeTrue();
     expect(textarea?.inputMode).toBe(component.inputMode);
+    expect(textarea?.autoFocus).toBe(component.autoFocus);
 
     textarea?.valueChange.next('Hi, how are you?');
     fixture.detectChanges();

projects/stream-chat-angular/src/lib/message-input/message-input.component.ts

@@ -87,6 +87,10 @@ export class MessageInputComponent
    * In `desktop` mode the `Enter` key will trigger message sending, in `mobile` mode the `Enter` key will insert a new line to the message input. If no value is provided, it is set from the [`MessageInputConfigService`](../services/MessageInputConfigService.mdx).
    */
   @Input() inputMode: 'desktop' | 'mobile';
+  /**
+   * Enables or disables auto focus on the textarea element
+   */
+  @Input() autoFocus = true;
   /**
    * Emits when a message was successfuly sent or updated
    */

projects/stream-chat-angular/src/lib/message-input/textarea.directive.spec.ts

@@ -18,6 +18,7 @@ describe('TextareaDirective', () => {
       mockComponent = {
         value: '',
         inputMode: 'desktop',
+        autoFocus: false,
         valueChange: new EventEmitter<string>(),
         send: new EventEmitter<void>(),
         ngOnChanges: () => {},
@@ -59,6 +60,7 @@ describe('TextareaDirective', () => {
       mockComponent = {
         value: '',
         inputMode: 'desktop',
+        autoFocus: false,
         valueChange: new EventEmitter<string>(),
         send: new EventEmitter<void>(),
         userMentions: new EventEmitter<UserResponse[]>(),
@@ -99,5 +101,16 @@ describe('TextareaDirective', () => {
         jasmine.any(Object)
       );
     });
+
+    it('should pass on #autoFocus', () => {
+      directive.autoFocus = true;
+      spyOn(mockComponent, 'ngOnChanges');
+      directive.ngOnChanges({ autoFocus: {} as any as SimpleChange });
+
+      expect(mockComponent.autoFocus).toBe(true);
+      expect(mockComponent.ngOnChanges).toHaveBeenCalledWith(
+        jasmine.any(Object)
+      );
+    });
   });
 });

projects/stream-chat-angular/src/lib/message-input/textarea.directive.ts

@@ -22,6 +22,7 @@ export class TextareaDirective implements OnChanges {
   @Input() inputMode!: 'mobile' | 'desktop';
   @Input() value = '';
   @Input() placeholder: string | undefined;
+  @Input() autoFocus!: boolean;
   @Output() readonly valueChange = new EventEmitter<string>();
   @Output() readonly send = new EventEmitter<void>();
   @Output() readonly userMentions = new EventEmitter<UserResponse[]>();
@@ -59,6 +60,7 @@ export class TextareaDirective implements OnChanges {
         this.componentRef.instance.value = this.value;
         this.componentRef.instance.placeholder = this.placeholder;
         this.componentRef.instance.inputMode = this.inputMode;
+        this.componentRef.instance.autoFocus = this.autoFocus;
       }
     }
     if (changes.areMentionsEnabled) {
@@ -76,6 +78,9 @@ export class TextareaDirective implements OnChanges {
     if (changes.inputMode) {
       this.componentRef.instance.inputMode = this.inputMode;
     }
+    if (changes.autoFocus) {
+      this.componentRef.instance.autoFocus = this.autoFocus;
+    }
     // ngOnChanges not called for dynamic components since we don't use template binding
     let changesToPropagate = {};
     this.unpropagatedChanges.forEach(

projects/stream-chat-angular/src/lib/message-input/textarea.interface.ts

@@ -10,4 +10,5 @@ export interface TextareaInterface extends OnChanges {
   mentionScope?: 'channel' | 'application';
   placeholder?: string;
   inputMode: 'mobile' | 'desktop';
+  autoFocus: boolean;
 }

projects/stream-chat-angular/src/lib/message-input/textarea/textarea.component.html

@@ -1,6 +1,6 @@
 <textarea
   [value]="value || ''"
-  autofocus
+  [autofocus]="autoFocus"
   data-testid="textarea"
   #input
   placeholder="{{ placeholder | translate }}"

projects/stream-chat-angular/src/lib/message-input/textarea/textarea.component.ts

@@ -41,6 +41,10 @@ export class TextareaComponent
    * See [`MessageInputConfigService`](../services/MessageInputConfigService.mdx) for more information
    */
   @Input() inputMode!: 'desktop' | 'mobile';
+  /**
+   * Enables or disables auto focus on the textarea element
+   */
+  @Input() autoFocus = true;
   /**
    * Emits the current value of the input element when a user types.
    */