fix: multiple message menu can be opened on mobile

Author: szuperaz

projects/stream-chat-angular/src/lib/message-actions.service.ts

@@ -186,13 +186,18 @@ export class MessageActionsService<
    * By default the [`MessageComponent`](/chat/docs/sdk/angular/components/MessageComponent/) will display the [`MessageActionsBoxComponent`](/chat/docs/sdk/angular/components/MessageActionsBoxComponent/). You can override that behavior by providing your own event handler.
    */
   customActionClickHandler?: (details: MessageActionsClickDetails<T>) => void;
+  /**
+   * @internal
+   */
+  messageMenuOpenedFor$ = new BehaviorSubject<string | undefined>(undefined);
   private hasDisplayedClipboardWarning = false;
 
   constructor(
     private chatClientService: ChatClientService,
     private notificationService: NotificationService,
     private channelService: ChannelService
   ) {
+    this.messageMenuOpenedFor$.subscribe(console.log);
     combineLatest([
       this.messageToEdit$,
       this.channelService.activeChannel$,

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

@@ -1,5 +1,4 @@
 <div
-  #container
   data-testid="message-container"
   class="str-chat__message-simple str-chat__message str-chat__message--{{
     message?.type

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

@@ -28,7 +28,7 @@ import {
   CustomMetadataContext,
   MessageTextContext,
 } from '../types';
-import { fromEvent, Observable, Subscription, take } from 'rxjs';
+import { Observable, Subscription, take } from 'rxjs';
 import { CustomTemplatesService } from '../custom-templates.service';
 import { listUsers } from '../list-users';
 import { DateParserService } from '../date-parser.service';
@@ -112,12 +112,10 @@ export class MessageComponent
   messageMenuFloat!: NgxFloatUiContentComponent;
   @ViewChild('messageTextElement') messageTextElement?: ElementRef<HTMLElement>;
   @ViewChild('messageBubble') messageBubble?: ElementRef<HTMLElement>;
-  @ViewChild('container') messageContainer?: ElementRef<HTMLElement>;
   private showMessageMenuTimeout?: ReturnType<typeof setTimeout>;
   private shouldPreventMessageMenuClose = false;
   private _visibleMessageActionsCount = 0;
   private channelMemberCount?: number;
-  private touchOutsideMessageSubscriptions: Subscription[] = [];
 
   constructor(
     private chatClientService: ChatClientService,
@@ -292,18 +290,27 @@ export class MessageComponent
         this.registerMenuTriggerEventHandlers();
       });
     }
+    this.subscriptions.push(
+      this.messageActionsService.messageMenuOpenedFor$.subscribe((id) => {
+        if (this.message && this.message.id === id) {
+          if (!this.areMessageOptionsOpen) {
+            this.messageMenuTrigger?.show();
+          }
+        } else if (
+          (id === undefined || this.message?.id !== id) &&
+          this.areMessageOptionsOpen
+        ) {
+          this.messageMenuTrigger?.hide();
+        }
+      })
+    );
   }
 
   ngOnDestroy(): void {
     this.subscriptions.forEach((s) => s.unsubscribe());
-    this.messageMenuHidden();
-  }
-
-  messageMenuHidden() {
     if (this.showMessageMenuTimeout) {
       clearTimeout(this.showMessageMenuTimeout);
     }
-    this.touchOutsideMessageSubscriptions.forEach((s) => s.unsubscribe());
   }
 
   mousePushedDown(event: MouseEvent) {
@@ -551,20 +558,8 @@ export class MessageComponent
           )
             (document.activeElement as HTMLInputElement).blur();
           this.messageMenuTrigger.show();
-          // click event is handled by ngx-float-ui SDK, but long tap won't trigger click handler
-          this.touchOutsideMessageSubscriptions.push(
-            fromEvent(document, 'touchstart').subscribe((event) => {
-              if (
-                event.target === this.messageContainer?.nativeElement ||
-                this.messageContainer?.nativeElement.contains(
-                  event.target as Node
-                )
-              ) {
-                return;
-              }
-              this.messageMenuTrigger.hide();
-              this.messageMenuHidden();
-            })
+          this.messageActionsService.messageMenuOpenedFor$.next(
+            this.message?.id
           );
         }
         if (this.isViewInited) {