Merge pull request #684 from GetStream/prevent-multiple-message-menus…

…-on-mobile fix: multiple message menus can be opened on mobile
GetStream · Jan 27, 2025 · a429309 · a429309
2 parents 44fa54f + 635cb01
commit a429309
Show file tree

Hide file tree

Showing 3 changed files with 25 additions and 2 deletions.
diff --git a/projects/stream-chat-angular/src/lib/message-actions.service.ts b/projects/stream-chat-angular/src/lib/message-actions.service.ts
@@ -186,6 +186,10 @@ 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(

diff --git a/projects/stream-chat-angular/src/lib/message/message.component.html b/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

diff --git a/projects/stream-chat-angular/src/lib/message/message.component.ts b/projects/stream-chat-angular/src/lib/message/message.component.ts
@@ -290,10 +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());
+    if (this.showMessageMenuTimeout) {
+      clearTimeout(this.showMessageMenuTimeout);
+    }
   }
 
   mousePushedDown(event: MouseEvent) {
@@ -540,7 +557,10 @@ export class MessageComponent
               'undefined'
           )
             (document.activeElement as HTMLInputElement).blur();
-          this.messageMenuTrigger?.show();
+          this.messageMenuTrigger.show();
+          this.messageActionsService.messageMenuOpenedFor$.next(
+            this.message?.id
+          );
         }
         if (this.isViewInited) {
           this.cdRef.detectChanges();